如何将 Kendo UI Angular Chart 连接到数据源？答案

【问题标题】：How to wire Kendo UI Angular Chart to a datasource?如何将 Kendo UI Angular Chart 连接到数据源？
【发布时间】：2020-02-10 08:00:58
【问题描述】：

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

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);

但图表没有更新。

【问题讨论】：

请展示一些示例代码，说明您的数据源目前是如何配置的。
@IraklisGkougkousis 添加了当前工作的代码。根据文档，我需要使用 dataSource 在值更改时保持图表更新。 Kendo Angular 包中不存在 dataSource 指令。
我想你误会了。不需要dataSource 指令。可能发生的是更改检测没有发现更改。你如何更新chartConfig.series？
我正在使用索引直接更新系列值。我在问题中添加了其他代码。
好的，尝试将此行添加到parseInt:this.chartConfig.series = [...this.chartConfig.series]。这将更新this.chartConfig.series 的引用。如果你愿意，我可以写一个更详细的答案。

标签： kendo-ui kendo-ui-angular2 kendo-chart

【解决方案1】：

没有datasource 指令，你不需要这样的东西。问题是 Angular 没有接受对 this.chartConfig.series 的更改。

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

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

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

【讨论】：