实施例

Question

我创建了一个带角度图的BarChart，如下所示：

<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提供的链接，我设法编写了以下几行代码：

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

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

Answer 1

此问题解释了7次触发事件的原因：How to get chart instance? #464

如果在设置数据后设置了选项或其他可选属性   图表将被销毁并重新创建。这个逻辑是允许的   每次发生变化时图表都会自动更新   图表设置。

当发生这种情况时，您应该只更新您身边的参考资料。

要确定哪个图表对象是您想要的图表对象，只需在图表对象中查找图表指令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图表

1 个答案:

实施例