剑道UI图表-改变标记样式

Kendo UI Charts - Changing marker styling

本文关键字：样式 改变 UI 图表 剑道      更新时间：2023-09-26

我正在尝试在剑道UI折线图上标记样式。我使用的是剑道角桥，可以在这里找到。

我有一个简单的折线图，从JSON文件加载数据。使用k-options指令，我正在传递一个具有我创建的样式的对象。除了这个系列，一切似乎都很正常。标记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似乎没有任何影响。有什么问题吗?

Series是数组选项，您应该为每个单独的Series指定这些'marker '选项。在您的例子中，您已经将它指定为一个对象(而不是数组)作为系列的一个选项。第一个选项-尝试在数组中的任何对象中显式地指定它

。

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"，以便有标记。默认情况下，该系列的类型为'column'。

相关文章：