Chart.js 当光标位置错误时出现鼠标悬停工具提示

Question

我正在使用 chart.js 制作一个带有图表的网页。我想要并排放置 3 个饼图，并将它们包装在 div 和 display: flex; 中。第一个图表鼠标悬停工具提示工作正常。但是，对于第二张和第三张图表，工具提示仅在我将光标放在距数据部分一定距离时出现，但当我的光标直接位于数据部分时则不会出现。

我已经尝试设置 pointHitRadius 和工具提示模式，但似乎没有任何效果。

这是我工作的一个 jsfiddle：https://jsfiddle.net/6twvhpab/

Answer 1

问题不在于 display:flex 而在于：

html{
    zoom: 90%;
}

这一定会影响 chartjs 计算数据点位置的方式，如果您从样式表中删除上述代码，它将解决您的问题。

我创建了一个 fiddle 来整理您的 sylesheet 并演示它的工作原理：https://jsfiddle.net/kopf7d0L/

Answer 2

您可以在 div 图表中反向缩放

body{
 zoom:90%;
}

.chart{
 zoom:calc(1/0.9);
}

Chart.js 当光标位置错误时出现鼠标悬停工具提示

Chart.js mouseover tooltips appears when cursor in wrong position

html

javascript

tooltip

pie-chart

chart.js