点击堆积条形图上的事件-ChartJs

我正在尝试在Stacked Bar图表上实现click事件.

数据如下所示:

var chartData = {
    type: 'horizontalBar',
    data: {
        labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
        datasets: [
            {
                label: "P1",
                backgroundColor: '#cc3399',
                data: [6, 7, 6, 8, 6, 10, 3]
            },
            {
                label: "P2",
                backgroundColor: '#0099ff',
                data: [8, 9, 5, 8, 6, 10, 3]
            },
            {
                label: "P3",
                backgroundColor: '#0022ff',
                data: [6, 7, 6, 8, 6, 10, 3]
            }
        ]
    },
    options: {
        legend: { display: false },
        scales: {
            yAxes: [{
                stacked: true
            }],
            xAxes: [{
                stacked: true
            }]
        },

    }
}

点击事件和图表创建的方法如下所示:

var myChart = new
    Chart(document.getElementById("createCurrYearHccGapChart"),
    chartData);
var canvas = document.getElementById('createCurrYearHccGapChart');
canvas.Onclick= function (evt) {
    var activePoints = myChart.getElementsAtEvent(evt);
    var cdata = activePoints[0]['_chart'].config.data;
    var idx = activePoints[0]['_index'];
    var label = cdata.datasets[idx].label;
    var value = cdata.datasets[0].data[idx];
};

图表如下所示:

下面是我点击单个栏时得到的值:
栏1 - 标签= P1,值= 6
栏2 - 标签= P2,值= 7
栏3 - 标签= P3,值= 6等...

问题:
所以无论我在第一个栏上点击标签都是P1,因为我的整个栏的索引值为0,栏2的索引值为1,依此类推.

问题:
有没有办法识别x坐标值？这样我就可以确定点击是从哪个堆栈.

您可以使用以下针对图表的点击事件处理程序来完成此操作...

canvas.Onclick= function(evt) {
   var activePoint = myChart.getElementAtEvent(evt)[0];
   var data = activePoint._chart.data;
   var datasetIndex = activePoint._datasetIndex;
   var label = data.datasets[datasetIndex].label;
   var value = data.datasets[datasetIndex].data[activePoint._index];
};

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ⧩

var chartData = {
   type: 'horizontalBar',
   data: {
      labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
      datasets: [{
         label: "P1",
         backgroundColor: '#cc3399',
         data: [6, 7, 6, 8, 6, 10, 3]
      }, {
         label: "P2",
         backgroundColor: '#0099ff',
         data: [8, 9, 5, 8, 6, 10, 3]
      }, {
         label: "P3",
         backgroundColor: '#0022ff',
         data: [6, 7, 6, 8, 6, 10, 3]
      }]
   },
   options: {
      responsive: false,
      legend: {
         display: false
      },
      scales: {
         yAxes: [{
            stacked: true
         }],
         xAxes: [{
            stacked: true
         }]
      },

   }
}

var canvas = document.getElementById('createCurrYearHccGapChart');
var myChart = new Chart(canvas, chartData);

canvas.Onclick= function(evt) {
   var activePoint = myChart.getElementAtEvent(evt)[0];
   var data = activePoint._chart.data;
   var datasetIndex = activePoint._datasetIndex;
   var label = data.datasets[datasetIndex].label;
   var value = data.datasets[datasetIndex].data[activePoint._index];
   console.log(label, value);
};