ng2-chartsはchartjs関数に適用するchartjsオブジェクト

Question

私はng2-chartsを使用しており、より多くの制御が必要です。

xAxisの値の範囲は動的に変更する必要があります。これを実現するには、ng2-chartsで使用されるChart-Objectにアクセスする必要があります。その後、私は基本的に2つのステップに要約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を直接使用し、新しいデータごとに再描画を強制していました。 [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({}); 

Dataadding自体を削除するには、このようなHTMLで定義されている@Inputオブジェクト lineChartDataで行いました