Javascript 单击堆叠折线图不工作的事件

我正在设计一个具有堆叠面积的折线图。单击图表，图表方法

getElementsAtEvent（）

将返回空数组

在click event函数中，我需要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);
};

---

以下是完整数据集的示例

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

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只需查找单击位置的索引，然后在

值

的末尾使用它来查找该项目与

标签

相关的位置

如果这是你想要的不正确，请让我知道

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

---

你需要

数据的数组

还是只需要点击的数据的值？@Matt我需要一个包含x轴和Y轴数据点的数据数组。因此点击其中一个将返回[20,10,5,5,15…]？我特别需要点击时的x轴点。例如，

10:20

或

10:40

单击各个数据点时，上述逻辑工作。用户可以单击绘图图形中的任何位置。我不确定您在问什么/说什么。单击图形中的任何位置可获取values@ShashiSingh检查编辑1，并让我知道，如果这是你更指的。使用Edit1函数返回错误

getValueForPixel

不是函数