# 事件监听

URL: https://caijiao.org/chartjs/05-dynamic/04-events
Source: docs/chartjs/05-dynamic/04-events.md
Description: 讲解如何在 Chart.js 中监听用户交互事件，例如点击、悬停等操作，适用于实现交互式数据展示与行为响应。

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

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

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

[在线代码演示](/chartjs/demos/19.html)