Chart.js：如何在雷达图提示框中显示标签标题

我帮你搞定这个问题啦！出现这个情况是因为默认的提示框（tooltip）标题逻辑没有正确关联到你定义的labels数组，咱们可以通过自定义提示框的回调函数来修复这个问题。

解决方案代码 #

修改你的Chart初始化代码，添加options.plugins.tooltip配置，手动指定提示框标题的内容：

const coasters = [ [10, 12, 13, 14] ].flat()
new Chart('chart1', {
  type: 'radar',
  data: {
    labels: ['coaster 1', 'coaster 2', 'coaster 3', 'coaster 4'],
    datasets: [{
      label: 'Altura',
      data: coasters.map(eachCoaster => eachCoaster)
    }]
  },
  options: {
    plugins: {
      tooltip: {
        // 自定义提示框标题的生成逻辑
        title: function(context) {
          // 获取当前数据点对应的标签文本
          return context[0].label;
        }
      }
    }
  }
})

代码解释 #

• 我们在options.plugins.tooltip中添加了title回调函数，这个函数会在生成提示框标题时被调用。
• context参数包含了当前悬停数据点的所有信息，context[0].label就是对应labels数组里的文本内容（比如coaster 1），把它作为标题返回就能替换掉原来显示的数值。

这样修改之后，当你悬停任意数据点时，提示框顶部就会显示预期的标签文本，而不是数据点的数值啦。

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