如何将Kendo UI角图连接到数据源？

Question

我有一个带有一些系列数据的Kendo用户界面图。当我更新系列时，图表数据不会改变。我从文档中看到，它需要连接到数据源。但是数据源属性在角标记中不可用。

<kendo-chart
  [series]="chartConfig.series"
  [valueAxis] ="chartConfig.valueAxes"
  [legend]="chartConfig.legend"
  [title]="chartConfig.title"
  [tooltip]="chartConfig.tooltip"
  (seriesClick)="onSeriesClick($event)"
  (drag)="onDrag($event)"
  (dragStart)="dragStart($event)"
  (dragEnd)="dragEnd($event)">
</kendo-chart>

类型标

public chartConfig = {
title: {
  text: 'Insight'
},
legend: {
  position: 'bottom'
},

series: [], //Some data 
valueAxes: [], //Some data
categoryAxis: {
  categories: [],

  axisCrossingValues: [24, 24, 0],
  justified: true
},
tooltip: {
  visible: true,
  format: '{0}',
  template: '#= category #/03: #= value #'
}
};

当我有一个更新的值时，我会像这样更新这个系列。

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);

但是图表没有更新。

Answer 1

没有datasource指令，您不需要这样的指令。问题是不能从角度上获取对this.chartConfig.series的更改。

角度变化检测检查参考变化，而不是简单的值变化。对于这个问题，最简单的解决方案是，在执行了任何更新之后，将this.chartConfig.series的引用更改如下：

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);
this.chartConfig.series = [...this.chartConfig.series];

最后一行基本上创建了一个与原始数组相同的新数组，并将this.chartConfig.series的引用更改为指向新创建的数组。这使得它更有可能被角度变化检测到。