Chart.js自定义数据点悬停标签实现方法咨询

嘿，这事儿其实挺简单的，Chart.js专门提供了tooltip回调函数，能轻松覆盖默认的提示内容。我给你分两种主流版本情况讲解，你对应自己用的版本来调整就行：

如果你用的是Chart.js v3+版本（目前主流版本） #

只需要在图表的options配置里加一段tooltip.callbacks，就能自定义提示文本：

const myChart = new Chart(document.getElementById('yourChartId'), {
  // 你的图表类型、data配置（包括你用for循环生成的data数组）
  type: 'line', // 也可以是你用的bar、pie等其他类型
  data: {
    labels: ['数据点1', '数据点2', '数据点3'], // 你的X轴标签
    datasets: [{
      data: [75, 88, 95], // 替换成你for循环生成的得分数组
      // 其他数据集配置（颜色、标签等）
    }]
  },
  options: {
    tooltip: {
      callbacks: {
        // 隐藏默认的X轴标题（如果不需要的话）
        title: () => '',
        // 自定义提示框核心内容
        label: (context) => {
          // context.parsed.y就是当前悬停数据点的Y值（也就是你的得分）
          return `你的得分是：${context.parsed.y}`;
        }
      }
    }
  }
});

如果你用的是Chart.js v2版本（旧版本） #

v2的配置略有不同，是tooltips（复数形式），获取Y值的方式也稍有区别：

const myChart = new Chart(document.getElementById('yourChartId'), {
  type: 'line',
  data: {
    // 你的data配置
  },
  options: {
    tooltips: {
      callbacks: {
        title: () => '',
        label: (tooltipItem, data) => {
          // 获取当前数据点的Y值
          const score = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return `你的得分是：${score}`;
        }
      }
    }
  }
});

小补充 #

• 要是你的得分数据存在自定义结构里，也可以用context.raw.y来获取值，效果是一样的。
• 如果想做更复杂的提示框（比如加样式、多行文本），还能用到tooltip.callbacks.beforeLabel/afterLabel，或者external回调自定义整个HTML结构，但对你的需求来说，上面的方法完全够用啦。

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