ng2-диаграммы доступ к базовой карте объекта

Question

Я использую ng2-charts в моем ионном проекте 2, чтобы нарисовать линейную диаграмму. Мне нужно получить доступ к коллекции данных диаграммы диаграммы в событии (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: (добавлен элемент идентификатор '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' в шаблоне. Украшение переменной chartComponent с помощью @ViewChild позволяет получить доступ к компоненту диаграммы через эту переменную. Обратите внимание, что ссылки, возвращаемые @ViewChild, доступны только после события события «ngAfterViewInit». Поскольку мой вариант использования - это событие щелчка на карте, я могу с уверенностью предположить, что к этому моменту представление было инициализировано.

Код: Angular @ViewChild