菜鸟教程
教程 chartjs tutorial

事件监听

Chart.js 支持通过配置 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}`;
        }
      },
    },
  });
})();
在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>事件监听</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 700px;
margin: 2rem auto;
font-family: sans-serif;
background: #f9f9f9;
padding: 1rem;
text-align: center;
}


canvas {
  background: #fff;
  border: 1px solid #ccc;
  margin: 1rem auto;
}

#output {
  margin-top: 1rem;
  font-weight: bold;
  color: #333;
}



</style>
</head>


<body>
<canvas id="eventChart" width="700" height="400"></canvas>
<div id="output">点击图表上的柱状条查看数值</div>
<script>
(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) =&gt; {
        if (elements.length &gt; 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}`;
        }
      }
    }
  });
})();



</script>
</body>


</html>

相关内容