Question

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

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

代码：

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中，您需要为title定义一个tooltip callback，如下所示：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="120"></canvas>

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

1 个答案: