ng2-charts 访问基本图表对象 [英] ng2-charts access base chart object

问题描述

我在我的 ionic 2 项目中使用 ng2-charts 来绘制折线图.我需要在 (chartClick) 事件中访问图表数据点集合.为此，我需要访问图表的基本 chart.js 对象.有没有办法可以访问图表对象?

I'm using ng2-charts in my ionic 2 project to draw a line chart. I need to access the chart datapoint collection in the (chartClick) event. For that I need access to the base chart.js object for the chart. Is there a way I can access the chart object?

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

推荐答案

最终设法解决了这个问题.使用 app.getComponent() 方法获取对 ng2-chart 对象的引用，然后对内部 chart.js 图表对象进行引用.

Managed to solve this eventually. Used the app.getComponent() method to get a reference to the ng2-chart object and then to the internal chart.js chart object.

HTML:(添加元素 id 'mylinechart')

HTML: (added the element 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]));
}

2017 年 2 月 14 日更新@ViewChild

如果上述方法不起作用(由于角度更新)，请尝试此操作.我没有测试这个确切的代码，因为我没有确切的源代码了.在我当前的项目中，我使用的是 angular 2.4，所以我知道 @ViewChild 有效.

If the above doesn't work (due to angular updates) try this. I didn't test this exact code as I don't have the exact source code anymore. In my current project I'm using angular 2.4 so I know @ViewChild works.

将 HTML 标记更改为:

Change the HTML markup to:

(注意#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' 生命周期事件之后可用.由于我的用例是图表点击"事件，因此我可以放心地假设该视图已在那时初始化.

Basically @ViewChild gets you a reference to the component marked by '#mylinechart' in the template. Decorating the chartComponent variable with @ViewChild makes it possible to access the chart component via that variable. Please note that references returned by @ViewChild are only available after 'ngAfterViewInit' life-cycle event. Since my use case is a chart 'click' event, I can safely assume that the view has been initialized by that time.

参考:Angular@ViewChild

这篇关于ng2-charts 访问基本图表对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！