javascript - Kendo UI 图表 - 更改标记样式

Question

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

我有一个简单的折线图，它从 JSON 文件加载数据。使用 k-options 指令，我传入一个具有我创建的样式的对象。除了 series.markers API 之外，一切似乎都有效。

使用 Angular Directive(指令)创建图表:

<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

系列是数组选项，您应该为每个单独的系列指定这些“标记”选项。在您的情况下，您已将其指定为该系列的一个选项作为对象(而不是数组)。第一个选项 - 尝试在带有系列的数组内的任何对象内显式指定它。

例如

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

另一个可以尝试的选择是将其放入 seriesDefault 中。

此外，正如文档中明确指出的，您必须使用系列类型，例如“area”、“line”、“scatter”、“scatterLine”、“radarLine”、“radarArea”、“polarLine”、“polarScatter”或“极地区域”以便有标记。默认情况下，该系列的类型为“列”。