当光标位置错误时，将显示Chart.js鼠标悬停工具提示

Question

我正在使用chart.js创建一个包含图表的网页。我想并排设置3个饼图，并用display: flex;将它们包装在div中。第一个图表的鼠标悬停工具提示工作正常。但是，对于第二个和第三个图表，仅当我将光标放在数据段的某个距离处时，才会显示工具提示，而当光标直接位于数据段上时，则不会出现。

我尝试设置pointHitRadius和工具提示模式，但似乎无济于事。

这是我工作的重点：https://jsfiddle.net/6twvhpab/

Answer 1

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

html{
    zoom: 90%;
}

这必须弄乱chartjs计算数据点位置的方式，如果您从样式表中删除上述代码，那么它将解决您的问题。

我创建了一个小提琴来整理您的音节并演示其工作原理：https://jsfiddle.net/kopf7d0L/