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

有效只需找到您点击的位置的索引，然后在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]);
};

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

1 个答案: