Chart.js 实现图表悬停时动态更新外部数据显示-html教程-PHP中文网

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 定位叠加显示：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

<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 悬停事件 */
}

⚠️ 注意事项：