本文介绍如何利用 Chart.js 的 onHover 事件动态更新页面中与图表联动的 HTML 元素，实现悬停扇区时实时显示对应资产名称与数值的效果。
本文介绍如何利用 chart.js 的 `onhover` 事件动态更新页面中与图表联动的 html 元素，实现悬停扇区时实时显示对应资产名称与数值的效果。
在 Chart.js 中，原生支持丰富的交互事件钩子，其中 onHover 是实现「悬停即响应」体验的关键入口。它会在鼠标移入/移出图表元素（如饼图扇区、柱状图柱体）时被触发，并提供当前高亮元素的索引信息，从而让我们精准读取并渲染关联数据。
以下是一个完整、可运行的实现方案：
✅ 核心逻辑说明
-
onHover回调接收两个参数：evt（事件对象）和activeEls（当前激活的元素数组）； - 当
activeEls.length === 0时，表示无悬停目标（例如鼠标移出图表），此时可选择清空或保留默认值； - 否则，通过
activeEls[0].index获取标签索引，结合evt.chart.data.labels和datasets[0].data提取对应名称与数值； - 使用原生 DOM 操作（如
getElementsByClassName）定位并更新.chart-asset-type和.chart-asset-value元素内容。
? 完整代码示例
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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>
<style>
.chart-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 224px;
height: 224px;
}
.chart-balance {
position: absolute;
text-align: center;
z-index: 10;
}
.chart-asset-type {
margin: 0;
font-size: 14px;
color: #333;
}
.chart-asset-value {
margin: 4px 0 0;
font-size: 18px;
font-weight: bold;
color: #2c3e50;
}
</style>
<script>
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,
maintainAspectRatio: false,
cutout: '72%',
plugins: {
legend: { display: false }
},
onHover: (evt, activeEls) => {
if (activeEls.length === 0) return;
const labelEl = document.querySelector('.chart-asset-type');
const valueEl = document.querySelector('.chart-asset-value');
const idx = activeEls[0].index;
const label = evt.chart.data.labels[idx];
const value = evt.chart.data.datasets[0].data[idx];
labelEl.textContent = label;
valueEl.textContent = `$${value},000`; // 示例格式化：50 → $50,000
}
}
});
</script>⚠️ 注意事项
-
DOM 查询优化：推荐使用
document.querySelector()替代getElementsByClassName()[0]，语义更清晰且性能更优； -
数值格式化：示例中对数值做了简单货币化处理（如
50 → $50,000），实际项目中建议使用Intl.NumberFormat或自定义 formatter 增强可维护性； -
响应式适配：若需支持移动端，应启用
responsive: true并配合maintainAspectRatio: false避免布局错位； -
无障碍兼容：可进一步添加
aria-live="polite"到.chart-balance区域，提升屏幕阅读器体验。
通过以上配置，你将获得一个轻量、高效、高度可定制的悬停交互图表——无需额外依赖，仅靠 Chart.js 原生能力即可实现专业级数据反馈效果。
