如何在Chart.js中实现鼠标悬停柱状图时额外展示自定义文本信息

你使用的是Chart.js 2.9.3版本，要实现悬停柱条时追加自定义文本，只需在图表配置的options项中新增tooltips相关配置，通过callbacks.label回调自定义提示内容即可，修改方式如下：

核心修改点 #

• 提前准备好和labels顺序一一对应的自定义文本数组，数组索引和人员顺序匹配
• 重写提示框的label回调，返回默认展示内容+自定义内容，返回数组时会自动分行展示

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChartJS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
</head>
<body>
<canvas id="monGraph" width="400" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script>
let ctx = document.querySelector("#monGraph")
let graph = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ['Patrick', 'Josh', 'Sebastien', 'Oliver', 'Violette', 'Peter'],
    datasets: [
      {
        label: 'Number of votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red'
      },
      {
        label: 'Number of likes',
        data: [14, 2, 5, 8, 7, 22],
        backgroundColor: 'blue',
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'My nice Chart'
    },
    legend: {
      position: 'bottom'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    // 新增tooltip自定义配置
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          // 获取默认展示的标签内容
          const defaultContent = data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
          // 自定义文本数组，顺序和labels人员顺序一一对应，可自行修改内容
          const customContentList = [
            'Patrick：市场部员工，入职2年',
            'Josh：产品部员工，入职3年',
            'Sebastien：研发部员工，入职1年',
            'Oliver：运营部员工，入职4年',
            'Violette：设计部员工，入职2.5年',
            'Peter：测试部员工，入职1.5年'
          ];
          const customContent = '额外信息：' + customContentList[tooltipItem.index];
          // 数组返回会自动分行展示
          return [defaultContent, customContent];
        }
      }
    }
  }
})
</script>
</body>
</html>

如果你不需要分行展示，也可以直接拼接字符串返回，比如return defaultContent + ' | ' + customContent即可。

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