ng2-charts访问chartjs对象以应用chartjs函数

Question

我使用的是NG2图表，需要更多的控制。

xAxis值范围应该动态变化。要实现这一点，我需要访问NG2-Chart使用的Chart-Object。然后我就可以做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“。

查看ng2-charts中的chartjs实现，我可以看到BaseChartDirective控制图表的生成，并将生成的图表存储为一个类属性(this.chart)。但是，我不确定如何在我的组件中访问此属性。

ng2-charts是一个模块，因此是我的@NgModule导入的一部分。

Answer 1

解决方案是直接在指令上使用@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({});