在 ChartJS 中单击时如何获取条形图标签的值？

Question

我想在 Angular JS 中单击条形图时获取标签的值。我有 html 模板：

<canvas id="bar" class="chart chart-bar" chart-data="data"
                                 chart-labels="labels" chart-legend="true"  height="350"
                                chart-series="series" chart-click="onClick"> 
</canvas>

这是我的点击事件的 JS：

$scope.onClick = function (points, evt) {
                                console.log("Chart clicked", points, evt);
                                console.log(points);
                                if(points.length > 0){
                                    console.log("Bar chart clicked");
                                    console.log("Point", points[0].value);

                                }
                              };

我要做的是在条形图上单击时显示标签的值，更具体地说，我想获取 _model -> 标签的值。下面是控制台打印的图片。

这一行：console.log("Point", points[0].value); 返回未定义。

提前致谢！

Answer 1

尝试在$scope.onClick 回调中包含第三个变量，该变量在您单击特定栏时定义。

在 HTML 中：

<canvas id="bar" 
        ... other stuff ...
        chart-click="ctrl.onClick">
</canvas> 

在控制器中：

ctrl.onClick = function(_points, _event, barClicked) {
  if (barClicked) {
    var associatedLabel = barClicked._model.datasetLabel;
    console.log("Label of the bar you clicked is " + associatedLabel);
  }
}

我在 X 轴上为每个 year 渲染多个条形图，最初只使用了两个回调变量，但 _points 给我的只是我点击一年内的所有图表元素。上面给出了我点击的确切栏。

我在 ChartJS 文档中找不到这个，所以我不确定它是否适用于所有情况，但它对我来说很神奇。干杯！

Answer 2

$scope.onClick = function (points, e, instance) {
    $scope.chart = instance._chart;
    $scope.activeElement = $scope.chart.getElementAtEvent(e);        
    console.log(points[0]._chart.data.datasets[$scope.activeElement[0]._datasetIndex].data[$scope.activeElement[0]._index] );
};