如何將點擊事件添加到圖表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>