Angular chart.js onClick 不起作用 - 如何在单击时获取栏的所有元素

Question

我是 Chart.js 的初学者，我正在尝试在创建图表时创建点击事件。

我试图在单击栏时访问栏的所有元素，但现在，onClick 方法甚至运行都不正确。图表呈现得很好——不需要任何 html，因为 canvas 是在代码中创建的。为了解决这个问题，我将不胜感激

controller($state, $scope, $rootScope) {
    $scope.myChart;

.....

    $scope.go = function myFunc() {
      document.getElementById("chartContainer").innerHTML = '&nbsp;';
      document.getElementById("chartContainer").innerHTML = '<canvas style="margin-top: 10px; padding-top: 20px; height:90% ; background-color: ' + vm.options.backgroundColor + '; " id="myChart" click="onClick"></canvas>';
    var ctx = document.getElementById("myChart").getContext('2d');

       render($scope.myChart, ctx, vm.options.barColor, vm.options.backgroundColor, labelVal, value);
  };
  $scope.onClick = function (evt) {
    console.log("Testing"); 
  };

}
var render = function createChart(myChart, ctx, barColor, backgroundColor, labels, values) {


myChart = new Chart(ctx, {
    type: 'bar',

    data: {
        labels: labels,
        datasets: [{
            backgroundColor: barColor,

            data: values,
                }]

    },
    options: {
        events: ['click'],
        chartArea: {
            backgroundColor: backgroundColor,
        },
        global: {
            responsive: true,
            maintainAspectRatio: false,
        },
        scaleBeginAtZero: true,
        maintainAspectRatio: false,

        scales: {
            xAxes: [{
                ticks: {
                    autoSkip: false,
                }
                }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    min: 0
                }
                    }]
        }
    }
});

}

Answer 1

尝试在您的图表选项中添加以下单击事件处理程序...

options: {
   onClick: function(e) {
      var element = this.getElementAtEvent(e);
      if (element.length) {
         console.log(element[0])
      }
   },
   ...
}

^{据我所知这应该有效}

Angular chart.js onClick 不起作用 - 如何在单击时获取栏的所有元素

Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on

javascript

angularjs

angularjs-scope

bar-chart

chart.js