访问已创建的 Chart.js 图表

Question

我创建了一个带有 angular 图表的条形图，如下所示：

<canvas id="bar" 
 chart-data="ctrl.barChartData" 
 chart-options="ctrl.barChartOptions" 
 chart-labels="ctrl.barChartLabels" 
 chart-series="ctrl.barChartSeries" 
 chart-click="ctrl.chartClick" 
 class="chart chart-bar">
</canvas>

我根据一些示例写了一个 chartClick 函数，看起来像这样：

vm.chartClick = function(evt){
        var myBarChart = //how I can obtain a access to my created bar chart?
        var activePoints = myBarChart.getPointsAtEvent(evt);
        console.log("active: "+activePoints);
}

我的问题是：如何获得对我创建的图表的访问权限并将其分配给 myBarChart？

我找到了 Highcharts 的解决方案，但是我找不到 Chart.js

的解决方案

更新：

基于@IBarros提供的link，我写了以下几行代码：

$scope.$on('chart-create', function (event, chart) {
    //console.log(chart);
    myBarChart = chart;
});

我有 2 个图表 - 一个饼图，一个条形图。更重要的是，可以为每个图表多次发出该事件，因此我将 7 个图表打印到控制台中。我的下一个问题是：如何找出我正在寻找的条形图是什么图表？

Answer 1

事件被触发 7 次的原因在本期中有解释：How to get chart instance? #464

If options or other optional attributes are set after the data is set the chart will be destroyed and recreated. This logic is what allows the chart to be automatically updated everytime something changes in the chart settings.

When that happens you should just update the reference on your side.

要确定哪个图表对象是您想要的，只需在图表对象中查找图表指令 ID（或图表类型）。

示例：

将对象用作关联数组

$scope.myCharts = {};

在关联数组中保存对象引用

$scope.$on('chart-create', function (event, chart) {
    console.log(chart.chart.canvas.id);
    console.log(chart.chart.config.type);
    //If id is the same, reference will be updated
    $scope.myCharts[chart.chart.canvas.id] = chart;
});

通过指令 id 访问图表对象

console.log($scope.myCharts[id]);

访问已创建的 Chart.js 图表

Getting access to already created Chart.js chart

javascript

angularjs

chart.js

angular-chart

示例：