Question

我正在尝试在Kendo UI折线图上设置标记样式。我正在使用Kendo-Angular桥，可以找到here。

我有一个简单的折线图，可以从JSON文件中加载数据。使用k-options指令，我传入的对象包含我创建的样式。除了series.markers API

之外，一切似乎都有效

使用angular指令创建图表：

<div ng-controller="MyCtrl">
    <div class="demo-section k-content">
        <div class="box-col" style="width: 500px;">
            <h4>Hover some series</h4>
            <div kendo-chart="chart"
                 k-legend="{ position: 'bottom' }"
                 k-series-defaults="{ type: 'line' }"
                 k-series="[
                                 { field: 'id', name: 'ID' },
                                 { field: 'value', name: 'VALUE' }
                             ]"
                 k-data-source="electricity"
                 k-series-hover="onSeriesHover"
                 k-options="chartOptions"
                 ></div>
        </div>
    </div>
</div>

初始化：

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $interval) {

    $scope.chartOptions = {
        renderAs: "canvas",
        transitions: false,
        //Start widget styling
        categoryAxis:{
            background: '#551A8B'
        },
        seriesColors: ["#fa7839"],
        series: {
            markers: {
                type: "triangle",
                size: 30
            }
        }
    }
    $scope.electricity = new kendo.data.DataSource({
        transport: {
            read: {
                url: "electricity.json",
                dataType: "json"
            }
        },
        scheme: {
            model: {
                fields: {
                    Id: { type: "number" },
                    Value: {type: "number"}
                }
            }
        },
        change: function (data) {
            $scope.chart.redraw()
            console.log(data)
            console.log("Changed")
        }
    });
    // Refresh the graph every 150ms
    $interval(function(){
        $scope.chart.redraw()
        }, 150);


}

此代码似乎遵循API文档中显示的示例。 categoryAxis和seriesColors工作，但series.markers.type和series.markers.size似乎没有任何效果。它有什么问题？

Answer 1

Series是数组选项，您应该为每个单独的系列指定那些'markers'选项。在您的情况下，您已将其指定为系列的选项作为对象（而不是数组）。第一个选项 - 在数组内的任何对象内明确指定它。

e.g。

k-series="[
            { field: 'id', name: 'ID',
              markers: {
                 type: 'triangle',
                 size: 30
              } 
             },
            { field: 'value', name: 'VALUE' }
          ]"

尝试的另一个选择是将它放在seriesDefault中。

同样如文档中明确指出的那样，您必须使用系列类型，例如“area”，“line”，“scatter”，“scatterLine”，“radarLine”，“radarArea”，“polarLine”，“polarScatter”或“polarArea”以便有标记。默认情况下，系列的类型为“列”。

Kendo UI Charts - 更改标记样式

1 个答案: