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

Question

我有一个包含一些系列数据的 Kendo UI 图表。当我更新系列时，图表数据没有改变。我从文档中看到它需要连接到数据源。但是数据源属性在 Angular 标签中不可用。

HTML

<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 指令，您不需要那样的东西。问题是 Angular 没有获取对 this.chartConfig.series 的更改。

Angular 更改检测检查引用更改，而不仅仅是值更改。这个问题最简单的解决方案是在执行任何更新之后，像这样更改 this.chartConfig.series 的引用：

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

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

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

How to wire Kendo UI Angular Chart to a datasource?

kendo-ui

kendo-ui-angular2

kendo-chart