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 - ＆gt;的值。标签。下面是控制台中打印内容的图片。

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

提前致谢！

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

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

2 个答案: