事件监听

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}`;
        }
      },
    },
  });
})();

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。