Как подключить диаграмму Kendo UI Angular к источнику данных? - PullRequest
Новая
       32

Как подключить диаграмму Kendo UI Angular к источнику данных?

1 голос
/ 10 февраля 2020

У меня есть диаграмма интерфейса Kendo с некоторыми данными ряда. Когда я обновляю серию, данные диаграммы не меняются. Я вижу из документации, что он должен быть подключен к источнику данных. Но свойство источника данных недоступно в теге 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);

Но диаграмма не обновляется.

1 Ответ

1 голос
/ 10 февраля 2020

Директивы 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.

...