ng2-charts обращается к объекту chartjs для применения функций chartjs

Я использую ng2-диаграммы и требую большего контроля.

Диапазон значений xAxis должен динамически изменяться. Для этого мне нужно получить доступ к Chart-Object, используемому ng2-charts. Тогда я могу сделать это

Что в основном сводится к двум шагам:

//Chart-Object
var barChartDemo = new Chart(ctx).Bar(barChartData, {
  responsive: true,
  barValueSpacing: 2
});
setInterval(function() {
//removing the first dataentry
  barChartDemo.removeData();
//adding new data
  barChartDemo.addData([dData()], "dD " + index);
  index++;
}, 3000);

Я попробовал это решение, но похоже, что getComponent () устарел. Чтобы обойти это, я попытался использовать @ViewChild (с и без ElementRef), что привело бы к тому, что свойство «диаграмма» не было определено для полученного объекта.

Глядя на реализацию chartjs в ng2-charts, я вижу, что BaseChartDirective управляет генерацией диаграмм и сохраняет сгенерированную диаграмму как свойство класса (this.chart). Однако я не уверен, как получить доступ к этому свойству в моем компоненте.

ng2-charts - это модуль и, следовательно, часть моего импорта @NgModule.


angular chart.js ng2-charts
person Wandang    schedule 13.02.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Решение заключалось в прямом использовании @ViewChild в директиве и принудительной перерисовке с каждыми новыми данными. Добавление и удаление данных было выполнено в объекте @Input lineChartData, который определен в HTML следующим образом: [datasets]="lineChartData"

Код:

import { BaseChartDirective } from 'ng2-charts/charts/charts';
export class Example{
    @ViewChild(BaseChartDirective) baseChartDir: BaseChartDirective;
    public lineChartData: Array<any>;

    //call this function whenever you want an updated version of your chart
    this.baseChartDir.ngOnChanges({});
person Wandang    schedule 13.02.2017
comment
Я пытался установить градиентный фон на гистограмме, но мне нужен был способ вручную обновить базовую диаграмму в ngAfterViewInit. это сработало отлично! - person Chris Newman; 03.06.2019