Chart.js如何实现悬浮柱状图时将对应值显示到指定HTML元素

实现方案 #

你可以直接通过Chart.js内置的onHover事件回调实现需求，只需要在原有配置的options层级下新增事件监听逻辑即可，以下是完整可运行的修改后代码：

修改后的完整JS代码 #

new Chart('myChart', {  
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{    
      label: 'X',
      type: 'bar',
      backgroundColor: 'rgb(0, 0, 255)',
      data: [2, 3, 15, 34, 0],
      barThickness: 40
    }]
  },
  options: {
    // 新增的交互事件配置
    onHover: function(event, elements) {
      const valueEl = document.getElementById('valueHeader');
      // 判定当前是否悬浮在柱状图柱子上
      if (elements.length > 0) {
        // 取当前悬浮柱子对应的数据值
        const currentValue = elements[0].raw;
        valueEl.textContent = currentValue;
      } else {
        // 鼠标移出柱子时清空数值，也可以改为默认值比如0
        valueEl.textContent = '';
      }
    },
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      y: {
        beginAtZero: true
      },
      x: {      
        stacked: true,
        grid: {
          display: false
        }
      }
    }
  }
});

逻辑说明 #

• onHover回调会在鼠标和图表发生交互时触发，第二个参数elements就是当前鼠标悬浮位置对应的图表元素集合
• 当elements长度大于0时，说明鼠标正悬浮在某个柱子上，直接取elements[0].raw就能拿到对应柱子的数值
• 如果需要同时展示分类标签，也可以通过elements[0].label拿到当前柱子对应的X轴分类（即你定义的A/B/C/D/E）

内容的提问来源于stack exchange，提问作者pancake