代码之家 › 专栏 › 技术社区 › user4129291

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

linechart chart.js javascript

user4129291 · 技术社区 · 7 年前

我正在设计一个具有堆叠面积的折线图。单击图表,图表方法 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);
};

这是 fiddle 使用完整数据集

1 回复 | 直到 7 年前

-1

Matt 7 年前

如果我正确理解你想要什么,那么这应该对你有用。

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