ChartJS：点击条形图时获取标签值

I want to get the value of the label when clicked on a bar chart in Angular JS. I have the html template:

我想在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>

here is my JS for the click event:

这是我点击事件的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);

                                }
                              };

What I want to do is to display the value of the label when clicked on a bar chart, more specifically I want to get the value of _model -> label. Below is a picture of what gets printed in the console.

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

This line: console.log("Point", points[0].value); returns undefined.

这一行:console.log(“Point”,points [0] .value);返回undefined。

Thanks in advance!

提前致谢!

1 个解决方案

#1

Try including the third variable in the $scope.onClick callback, which gets defined when you click a particular bar.

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

In the HTML:

在HTML中:

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

In the controller:

在控制器中:

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

I was rendering multiple bars per year along the X-axis and originally used just the two callback variables, but all _points was giving me was all the chart elements within the year I clicked. The above gave me the exact bar I clicked.

我每年沿着X轴渲染多个条形图,最初只使用两个回调变量,但是所有_points都给了我一年中我点击的所有图表元素。上面给了我点击的确切栏。

I couldn't find this in the ChartJS docs, so I'm not sure if it is applicable in all cases, but it worked wonders for me. Cheers!

我在ChartJS文档中找不到这个,所以我不确定它是否适用于所有情况,但它为我创造了奇迹。干杯!

#1