Chart.js 实现图表悬停动态更新外部数据显示

本文介绍如何利用 Chart.js 的 onHover 事件回调，在用户悬停饼图扇区时实时更新页面中独立显示的资产名称与数值，实现交互式数据展示。

本文介绍如何利用 chart.js 的 `onhover` 事件回调，在用户悬停饼图扇区时实时更新页面中独立显示的资产名称与数值，实现交互式数据展示。

在 Chart.js 中，onHover 是一个强大的交互钩子，允许开发者监听鼠标悬停行为并执行自定义逻辑。结合饼图（doughnut）的数据结构，我们可以通过 activeEls 参数精准定位当前悬停的扇区索引，进而读取对应标签（labels）和数据值（data），并同步更新 DOM 中的外部元素。

以下为完整实现代码（适配 Chart.js v3.9+）：

const chart = document.getElementById('chart');new Chart(chart, {  type: 'doughnut',  data: {    labels: ['Bitcoin', 'Ethereum', 'Litecoin', 'Tether'],    datasets: [{      data: [50, 30, 10, 10],      backgroundColor: [        'orange',        'purple',        'darkblue',        'green'      ],      borderWidth: 2,    }]  },  options: {    responsive: false,    cutout: '72%',    plugins: {      legend: { display: false }    },    onHover: (event, activeElements) => {      // 确保有悬停目标且非空      if (!activeElements || activeElements.length === 0) return;      const firstActive = activeElements[0];      const labelEl = document.querySelector('.chart-asset-type');      const valueEl = document.querySelector('.chart-asset-value');      if (!labelEl || !valueEl) return;      const label = event.chart.data.labels[firstActive.index];      const value = event.chart.data.datasets[firstActive.datasetIndex].data[firstActive.index];      // 可选：格式化数值（如添加货币符号）      labelEl.textContent = label;      valueEl.textContent = `$${value.toLocaleString()}`;    }  }});

配套 HTML 结构保持简洁清晰，确保 .chart-balance 区域与 canvas 同级且通过 CSS 定位叠加显示：

<div class="chart-wrap">  <canvas id="chart" width="224" height="224"></canvas>  <div class="chart-balance">    <p class="chart-asset-type">Ethereum</p>    <h5 class="chart-asset-value">$1,000</h5>  </div></div>

CSS 建议补充基础样式以保障定位准确：

.chart-wrap {  position: relative;  width: 224px;  height: 224px;  margin: 0 auto;}.chart-balance {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  text-align: center;  pointer-events: none; /* 防止遮挡 canvas 悬停事件 */}

⚠️ 注意事项：

• onHover 回调中 activeElements 是数组，即使单点悬停也需取 [0]；
• 推荐使用 document.querySelector() 替代 getElementsByClassName()，语义更明确且返回单个元素；
• 若需支持移动端触摸悬停，可同时监听 onTouchStart 或启用 interaction.mode: 'nearest' 配置；
• 数据值若为金额、百分比等，应在赋值前做格式化处理，提升用户体验。

该方案轻量、解耦、可复用，适用于所有 Chart.js 图表类型（如 bar、line、pie），只需根据数据结构微调索引访问逻辑即可。