Chartjs：在雷达图表工具提示上获取标签标题

Question

除工具提示上显示的标题外，此雷达图工作正常。

将鼠标悬停在任何点上时，都会得到该点的值（10、12、13、14）作为工具提示的顶部标题，而不是我期望的标签文本（杯垫1，杯垫2，杯垫3，杯垫4）找到那里。

演示：https://jsfiddle.net/d8fLuzhr/

代码：

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)
    }]

  }
})

Answer 1

内部图表options，您需要为tooltip callback定义一个tooltip，如下所示：

title

请在下面查看您的修改后的代码。

tooltips: {
  callbacks: {
    title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
  }
}

new Chart('chart1', {
  type: 'radar',
  data: {
    labels: ['coaster 1', 'coaster 2', 'coaster 3', 'coaster 4'],
    datasets: [{
      label: 'Altura',
      data: [10, 12, 13, 14]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
      }
    }
  }
});