ng2-chartsアクセスベースチャートオブジェクト

Question

私のイオン2プロジェクトでng2-chartsを使用して折れ線グラフを描画しています。 （chartClick）イベントのグラフデータポイントコレクションにアクセスする必要があります。そのためには、チャートの基本chart.jsオブジェクトにアクセスする必要があります。グラフオブジェクトにアクセスする方法はありますか？

HTML：

<base-chart class="chart" 
     [data]="chartData" 
     [labels]="chartLabels" 
     [options]="lineChartOptions" 
     [colours]="lineChartColours" 
     [legend]="lineChartLegend" 
     [chartType]="chartType" 
     (chartClick)="chartClicked($event)"></base-chart> 

活字体：最終的にこの問題を解決するために管理

chartClicked(e: any) { 
    var chart = //reference to base chart object. 
    var points = chart.getPointsAtEvent(e); 
    alert(chart.datasets[0].points.indexOf(points[0])); 
} 

Answer 1

。 app.getComponent（）メソッドを使用してng2-chartオブジェクトへの参照を取得し、内部のchart.jsチャートオブジェクトへの参照を取得しました。

HTML：上記の場合@ViewChild

と

constructor(private app: IonicApp) { 
} 

chartClicked(e: any) { 
    var chartComponent = this.app.getComponent('mylinechart'); //ng2-chart object 
    var chart = chartComponent.chart; //Internal chart.js chart object 
    console.log(chart.datasets[0].points.indexOf(e.activePoints[0])); 
} 

14 02月2017年に更新を：活字体

<base-chart id="mylinechart" class="chart" 
    [data]="chartData" 
    [labels]="chartLabels" 
    [options]="lineChartOptions" 
    [colours]="lineChartColours" 
    [legend]="lineChartLegend" 
    [chartType]="chartType" 
    (chartClick)="chartClicked($event)"></base-chart> 

を（要素ID 'mylinechart' を追加）動作しません（角度更新による）これを試してください。私は正確なソースコードを持っていないので、私はこの正確なコードをテストしませんでした。私の現在のプロジェクトでは、角度2.4を使用しているので、@ ViewChildが動作することがわかります。

変更HTMLマークアップへ：

<base-chart #mylinechart class="chart" etc..（予告#mylinechart）

タイプスクリプト：上部に

：import { Component, ViewChild } from '@angular/core';

そして、あなたのコンポーネントクラスの内部：

@ViewChild('mylinechart') 
private chartComponent: any; 

constructor(private app: IonicApp) { 
} 

chartClicked(e: any) { 
    var chart = this.chartComponent.chart; //Internal chart.js chart object 
    console.log(chart.datasets[0].points.indexOf(e.activePoints[0])); 
} 

基本的に、@ViewChildは、テンプレートに '#mylinechart'とマークされたコンポーネントへの参照を取得します。変数chartComponentを@ViewChildで修飾すると、その変数を介してチャートコンポーネントにアクセスすることができます。 @ViewChildによって返される参照は、 'ngAfterViewInit'ライフサイクルイベントの後にのみ利用可能であることに注意してください。私のユースケースはチャート 'クリック'イベントなので、その時点でビューが初期化されていると見なすことができます。

参考：Angular @ViewChild