如何添加点击事件以图表JS

Question

您好，我有一个关于JS图表的问题。我已经在Django应用程序中创建了一个，我想通过单击图表中的某个点来生成JavaScript警报。 警报如何获得我选择的观点的值？ 例如，具有下图中所示的值92如下所示：

Answer 1

可以使用onclick甚至处理程序进行以下操作：

onClick: (event, elements, chart) => {
  if (elements[0]) {            
     const i = elements[0].index;
     alert(chart.data.labels[i] + ': ' + chart.data.datasets[0].data[i]);
  }
}

请查看以下可运行的代码，然后查看其工作原理。

new Chart('myChart', {
  type: 'line',
  data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: '# of Votes',
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: '#a00'
    }]
  },
  options: {
    onClick: (event, elements, chart) => {
      if (elements[0]) {            
         const i = elements[0].index;
         alert(chart.data.labels[i] + ': ' + chart.data.datasets[0].data[i]);
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="95"></canvas>