ng2-charts訪問基礎圖表對象

Question

我在我的ionic 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.js圖表​​對象的引用。

HTML：（添加的元素的id 'mylinechart'）

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

打字稿：

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-FEB-2017與@ViewChild更新

如果上述不起作用（由於角度更新）試試這個。我沒有測試這個確切的代碼，因爲我沒有確切的源代碼了。在我目前的項目中，我使用的是角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'標記的組件。使用@ViewChild修飾chartComponent變量可以通過該變量訪問圖表組件。請注意，@ViewChild返回的引用僅在'ngAfterViewInit'生命週期事件發生後可用。由於我的用例是一個圖表'點擊'事件，我可以放心地認爲視圖已經被初始化了。

參考：Angular @ViewChild