Chart.js新手求助：如何为悬停文本添加更多信息？

嘿，我来帮你搞定这个Chart.js Tooltip自定义的问题！其实官方文档里有关于Tooltip自定义的详细配置，只是可能你没挖到对应的部分～ 下面我给你一步步演示怎么实现需求：

第一步：确保Tooltip能正常触发 #

你当前代码里的options.events设置成了['click']，这会导致鼠标悬停时不会弹出Tooltip，所以首先要调整这个配置：

• 要么直接删掉events: ['click']这一行（用默认的事件集合，包含mousemove等，支持悬停触发）
• 要么改成events: ['click', 'mousemove']，同时保留点击和悬停事件

第二步：自定义Tooltip内容 #

Chart.js提供了tooltips.callbacks来完全自定义Tooltip的每一部分内容。我们可以先准备好每个标签对应的额外信息，然后在回调里关联显示：

修改后的完整代码 #

// 定义每个标签对应的额外信息，和labels数组索引一一对应
const labelExtraInfo = [
  "绿色系列：来自A区域监测点",
  "蓝色系列：来自B区域监测点",
  "黄色系列：样本采集量较少",
  "深绿系列：最新批次采集数据",
  "紫色系列：历史数据对比组",
  "橙色系列：实验对照组",
  "黑色系列：基准参考值"
];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: ["Green", "Blue", "Yellow", "Greennnnnn", "Purple", "Orange", "Black"],
 datasets: [
 { 
 label: 'DistanceA', 
 data: [12, 16, 3, 5, 2, 8, 4], 
 borderColor: ['rgba(86, 244, 66,1)'], 
 fill: false, 
 borderWidth: 1 
 },
 { 
 label: 'DistanceB', 
 data: [5, 2, 4, 10, 6, 3, 7], 
 borderColor: ['rgba(255,99,132,1)'], 
 fill: false, 
 borderWidth: 1 
 }
 ]
 },
 options: {
 // 去掉events配置，用默认事件（包含mousemove，支持悬停触发）
 scales: {
 yAxes: [{ ticks: { beginAtZero:true, stepSize: 2 } }]
 },
 tooltips: {
 callbacks: {
 // 自定义Tooltip的标题：把原标签和额外信息结合
 title: function(tooltipItems) {
 const currentIndex = tooltipItems[0].index;
 return `${tooltipItems[0].label} - ${labelExtraInfo[currentIndex]}`;
 },
 // 自定义每个数据项的显示：添加单位等信息
 label: function(tooltipItem, data) {
 const datasetName = data.datasets[tooltipItem.datasetIndex].label;
 const value = tooltipItem.yLabel;
 return `${datasetName}: ${value} 公里`;
 },
 // 在Tooltip底部添加统一的额外信息
 afterBody: function() {
 return `数据采集时间：2024-05-20`;
 }
 }
 }
 }
});

<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

代码说明 #

• labelExtraInfo数组：和data.labels的索引一一对应，存储每个标签的额外描述信息
• tooltips.callbacks.title：修改Tooltip的标题部分，把原标签和额外信息合并显示
• tooltips.callbacks.label：给每个数据集的数值添加单位（比如“公里”），让信息更清晰
• tooltips.callbacks.afterBody：在Tooltip的底部添加统一的补充内容，比如数据采集时间

如果你的需求是给每个数据点添加不同的额外信息，还可以把data改成对象数组的形式（比如data: [{value:12, info:'xxx'}, ...]），然后在回调里读取对应的数据点信息～

内容的提问来源于stack exchange，提问作者Willem van der Veen