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

【问题标题】：Chart.js mouseover tooltips appears when cursor in wrong positionChart.js 鼠标悬停工具提示出现在光标位置错误时
【发布时间】：2020-08-13 02:49:23
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html chart.js tooltip pie-chart

【解决方案1】：

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

html{
    zoom: 90%;
}

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

我创建了一个小提琴来整理您的样式表并演示此工作：https://jsfiddle.net/kopf7d0L/

【讨论】：

【解决方案2】：

您可以反向放大 div 图表

body{
 zoom:90%;
}

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

【讨论】：