事件监听

Chart.js 支持通过配置 options.onClick、options.onHover 等方式监听图表上的用户交互事件，从而实现数据响应、高亮、跳转等功能。

常见的事件包括点击数据点、鼠标悬停、离开图表等。以下示例展示了点击数据点时，在页面下方输出对应的标签和数值。

(function () {
  const ctx = document.getElementById('eventChart').getContext('2d');

  const chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['苹果', '香蕉', '橙子', '葡萄'],
      datasets: [{
        label: '销量',
        data: [12, 19, 3, 5],
        backgroundColor: 'rgba(54, 162, 235, 0.7)'
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false }
      },
      onClick: (e, elements) => {
        if (elements.length > 0) {
          const el = elements[0];
          const dataset = chart.data.datasets[el.datasetIndex];
          const value = dataset.data[el.index];
          const label = chart.data.labels[el.index];
          document.getElementById('output').innerText = `你点击了：${label}，值为：${value}`;
        }
      }
    }
  });
})();

loading