本文介绍如何利用 Chart.js 的 onHover 事件监听图表扇区悬停，实时更新外部 HTML 元素（如资产名称与数值），实现交互式数据展示效果。
本文介绍如何利用 chart.js 的 `onhover` 事件监听图表扇区悬停，实时更新外部 html 元素（如资产名称与数值），实现交互式数据展示效果。
在 Chart.js 中，若需实现“鼠标悬停到某数据扇区时，同步更新页面中独立区域的标题与数值”，核心在于捕获交互事件并动态操作 DOM。官方推荐的 onHover 配置项正是为此类场景设计——它会在鼠标移入/移出图表元素时触发，配合 activeEls 参数可精准定位当前高亮的数据项。
以下为完整实现方案：
✅ 基础配置与事件绑定
在 Chart.js 初始化选项中启用 onHover 回调函数，并确保其逻辑具备健壮性（例如判空、索引安全访问）：
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: (evt, activeEls) => {
// 若无激活元素，不执行更新
if (activeEls.length === 0) return;
const firstEl = activeEls[0];
const labelEl = document.querySelector('.chart-asset-type');
const valueEl = document.querySelector('.chart-asset-value');
// 安全获取对应标签和数值（支持多数据集场景）
const label = evt.chart.data.labels[firstEl.index];
const value = evt.chart.data.datasets[firstEl.datasetIndex].data[firstEl.index];
labelEl.textContent = label;
valueEl.textContent = `$${value.toLocaleString()}`; // 格式化为带千分位的美元金额
}
}
});✅ HTML 结构与样式要点
确保 .chart-balance 区域与 canvas 绝对定位重叠，且层级合理（z-index 高于图表）：
<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>.chart-wrap {
position: relative; /* 确保子元素绝对定位基准 */
display: flex;
align-items: center;
justify-content: center;
width: 224px;
height: 224px;
}
.chart-balance {
position: absolute;
text-align: center;
pointer-events: none; /* 避免遮挡 canvas 的 hover 事件 */
}⚠️ 注意事项：
- 使用 document.querySelector() 替代 getElementsByClassName()[0] 更语义清晰且兼容性更佳；
- activeEls 是一个数组，即使单击/悬停一个扇区也需取 [0]；多选模式下可扩展逻辑；
- pointer-events: none 对 .chart-balance 至关重要，否则会阻断 canvas 的鼠标事件；
- 数值建议添加格式化（如 toLocaleString() 或货币符号），提升用户体验；
- 若需支持移动端触摸交互，可补充 onTouchStart 或启用 interaction.mode: 'nearest' 配合 onHover。
通过以上配置，即可实现 GIF 中演示的效果：悬停不同币种扇区时，中央浮动面板实时切换显示对应资产名称与数值。该方案轻量、可复用，适用于所有 Chart.js 图表类型（如 bar、pie、radar），只需根据实际数据结构微调索引访问逻辑。
