堆叠折线图的单击事件不起作用

Question

我正在设计一个包含堆叠区域的折线图。单击图表时，图表方法 getElementsAtEvent() 返回空数组。

关于点击事件函数，我需要x轴数据点。

以下是图表配置（缩减数据集）和 onclick 事件详细信息：

var chartData = {
  labels: ['10:20', '10:25', '10:30', '10:35', '10:40', '10:45', '10:50', '10:55', '11:00', '11:05', '11:10', '11:15'],
  fill: true,
  datasets: [{
      label: 'First   ',
      borderColor: '#bada55',
      backgroundColor: '#bada55',
      data: [40, 20, 10, 10, 30, 60, 50, 55, 60, 70, 40, 45]
    },
    {
      label: 'My Second dataset',
      borderColor: '#44dd11',
      backgroundColor: '#44dd11',
      data: [20, 10, 5, 5, 15, 30, 25, 27, 20, 15, 20, 22]
    },
    {},
    {}
  ]
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        beginAtZero: true,
        ticks: {
          fontSize: 10
        }
      }],
      yAxes: [{
        stacked: true,
        display: false,
        beginAtZero: true,
        ticks: {
          fontSize: 10,
          min: 0,
          max: 100
        }
      }]
    }
  }
});
document.getElementById("myChart").onclick = function(evt) {
  var activePoints = myChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[0];
  var label = myChart.data.labels[firstPoint._index];
  var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
  if (firstPoint !== undefined)
    alert(label + ": " + value);
};

这是 fiddle 的完整数据集

Answer 1

如果我能正确理解您的需求，那么这应该适合您。

document.getElementById("myChart").onclick = function(evt) {
    var active = myChart.getElementAtEvent(event)[0]._index;
    var value = myChart.getElementAtEvent(event)[0]._chart.config.data.labels[active];
    alert(value);
};

Active 只是找到您单击的位置的索引，然后在 value 的末尾使用它来查找 labels 中与该项目相关的位置。

如果这不符合您的要求，请告诉我。

编辑 1

基于想点击任何地方，我把它当作从点到下一个点的小巷内的任何地方。您可以尝试以下方法：

document.getElementById("myChart").onclick = function(evt, array) { 
    var xLabel = myChart.scales['x-axis-0'].getValueForPixel(evt.x);    
    alert(myChart.config.data.labels[xLabel - 1]);
};

堆叠折线图的单击事件不起作用

Click event of stacked line chart not working

javascript

linechart

chart.js