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 :(添加了元素ID＆＃39; mylinechart＆＃39;）

<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]));
}

2017年2月14日更新@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会引用一个标记为＆＃39; #mylinechart＆＃39;的组件。在模板中。使用chartComponent修饰@ViewChild变量可以通过该变量访问图表组件。请注意，@ViewChild返回的引用仅在＆amp; ngAfterViewInit＆＃39;之后可用。生命周期事件。由于我的用例是图表，因此请点击＆＃39;事件，我可以放心地假设该视图已经被初始化了。

参考：Angular @ViewChild

ng2-charts访问基础图表对象

1 个答案: