【问题标题】:Kendo UI Angular Line Charts Fill Data PointsKendo UI 角度折线图填充数据点
【发布时间】:2017-12-26 16:31:29
【问题描述】:

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

我读到我可以使用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" }]);
        }
      });

【问题讨论】:

    标签: angular kendo-ui-angular2 kendo-chart


    【解决方案1】:

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

    <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

    【讨论】:

    • 谢谢@topalkata !!!。我刚刚添加了这一行 [markers]="{ background: item.items[i].serieColor }" 并且一切正常。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多