问题描述
我正在使用chart.js创建一个包含图表的网页。我想并排设置3个饼图,并用display: flex;
将它们包装在div中。第一个图表的鼠标悬停工具提示工作正常。但是,对于第二个和第三个图表,仅当我将光标放在数据段的某个距离处时,才会显示工具提示,而当光标直接位于数据段上时,则不会出现。
我尝试设置pointHiTradius和工具提示模式,但似乎无济于事。
这是我工作的重点:https://jsfiddle.net/6twvhpab/
解决方法
问题不在于display:flex
,而在于:
html{
zoom: 90%;
}
这必须弄乱chartjs计算数据点位置的方式,如果您从样式表中删除上述代码,那么它将解决您的问题。
我创建了一个小提琴来整理您的音节并演示其工作原理:https://jsfiddle.net/kopf7d0L/