基于悬停交互的Chart.js数据展示方案需求

要实现鼠标悬停环形图区块时展示对应资产数据，可通过监听Chart.js的hover和mouseout事件，动态更新中心的DOM元素内容，具体实现如下：

修改后的完整代码 #

HTML #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-wrap">
  <canvas id="chart" class="kz-relative kz-index-10" width="224" height="224"></canvas>
  <div class="chart-balance">
    <p class="chart-asset-type">Total</p>
    <h5 class="chart-asset-value">$10,000</h5>
  </div>
</div>

CSS #

.chart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 确保绝对定位的子元素相对于容器定位 */
}

.chart-balance {
  position: absolute;
  text-align: center; /* 让文本居中显示 */
}

JavaScript #

const chart = document.getElementById('chart');
const assetTypeEl = document.querySelector('.chart-asset-type');
const assetValueEl = document.querySelector('.chart-asset-value');
const totalValue = 10000; // 总金额，可根据实际需求调整

const myChart = 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,
      },
      tooltip: {
        enabled: false // 可选，关闭默认tooltip，只保留中心显示
      }
    },
    // 监听鼠标悬停事件
    onHover: (event, elements) => {
      if (elements.length > 0) {
        const index = elements[0].index;
        const label = myChart.data.labels[index];
        const percentage = myChart.data.datasets[0].data[index];
        const value = (totalValue * percentage / 100).toLocaleString('en-US', {style: 'currency', currency: 'USD'});
        
        assetTypeEl.textContent = label;
        assetValueEl.textContent = value;
      }
    },
    // 监听鼠标移出事件
    onMouseOut: () => {
      // 鼠标移出时恢复显示总金额
      assetTypeEl.textContent = 'Total';
      assetValueEl.textContent = totalValue.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
    }
  }
});

关键实现说明 #

• 提前获取中心显示数据的DOM元素，定义总金额用于计算单资产对应金额
• 在Chart配置的options中添加onHover事件：当鼠标悬停在区块上时，通过elements获取当前区块索引，拿到对应标签和占比后计算资产金额，更新DOM内容
• 添加onMouseOut事件：鼠标移出图表时，恢复显示总金额
• 调整CSS，给.chart-wrap添加position: relative确保中心元素定位正确，给.chart-balance添加text-align: center让文本居中

内容的提问来源于stack exchange，提问作者xyz.sml