chart.js 中数据相互重叠的标签未显示工具提示

Question

我在这里使用 chart.js 创建了 spidar（雷达）图表 - https://stackblitz.com/edit/angular-ivy-ytsbxn。当我们有这样的数据 = [100,100,100,200] 时，所有三个标签的节点都会相互重叠，因此在这种情况下，工具提示仅显示一个标签，如您在演示中所见。

如何解决重叠节点的工具提示问题？

Answer 1

首先您需要为 title 和 label 定义 tooltips.mode: 'point' and then define tooltips.callbacks 函数，以便获得在工具提示中显示的有意义的数据。

tooltips: {
  mode: 'point',
  callbacks: {
    title: () => 'DataCombination',
    label: (tooltipItem, data) => data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index]
  }
}

请看一下你修改后的StackBlitz

chart.js 中数据相互重叠的标签未显示工具提示

Tool tip not showing for those label who's data overlapped on each other in chart.js

radar-chart

chart.js

angular7