ng2-chart access chartjs объект для применения функций chartjs

Question

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

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

Который в основном сводится к двум шагам:

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

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

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

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

Answer 1

Решение напрямую использовало @ViewChild в директиве и заставляло перерисовывать с каждой новой информацией. Dataadding и удаление себя было сделано на объекте @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({});