时间戳

首页 > 解决方案 > 堆叠折线图的点击事件不起作用

javascript - 堆叠折线图的点击事件不起作用

问题描述

我正在设计一个带有堆叠区域的折线图。单击图表时，图表方法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);
};

这是完整数据集的小提琴

标签： javascriptchart.jslinechart

解决方案

如果我正确理解您想要什么，那么这应该适合您。

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

推荐阅读