Kendo UI Angular 折线图填充数据点

Question

我正在使用 Kendo UI 折线图和 Angular。有谁知道如何使折线图上的标记变为实体？我从服务器收到线条颜色。

我读到我可以使用 markers: { background: "#004990" }, 但这不是来自服务器的动态颜色。

这是我的代码：

 this.reportWidgetSubscription = this.reportWidgetService.getChartChartByFilter(serverSide.serverUrl, serverSide.parameters.reportId, serverSide.parameters.chartId, QR).subscribe((data) => {
        let dataResult = data.result;
        if(dataResult){
          serverSide.dataSource = groupBy(dataResult, [{ field: "serieName" }]);
        }
      });

Answer 1

您可以像绑定任何其他颜色一样绑定标记背景颜色属性 - 值可以来自相应的系列项目或组件 class 字段，例如：

<kendo-chart-series-item *ngFor="let item of series"
                    [markers]="{ background: item.markerBackground }"
                    type="line" style="smooth" [data]="item.data" [name]="item.name">
                </kendo-chart-series-item>

public series: any[] = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
    markerBackground: "red"
  }, {...

EXAMPLE

如果颜色是与数据分开从服务器检索的，您仍然可以以类似的方式绑定它们：

EXAMPLE

Kendo UI Angular 折线图填充数据点

Kendo UI Angular Line Charts Fill Data Points

kendo-chart

kendo-ui-angular2

angular