缩放的 jquery 浮动图表的工具提示出现在错误的位置

Question

我正在使用flot 库

如果我使用以下 css 规则缩放图表，如何获得正确的工具提示：transform: scale(0.7);

flot 源使用函数findNearbyItem 来查找悬停的项目。

[FIDDLE] 演示了这两种情况 - scale(1) 和 scale(.7)

Answer 1

以你的小提琴作为问题的来源，实际上有几个问题需要处理：

1. 工具提示无法正常工作，如果您将鼠标悬停在工具提示上，它会消失（开始闪烁）。检查更新后的fiddle，如果您离开该栏，它现在会隐藏工具提示，如果您将鼠标悬停在工具提示本身上，它会保留。

2. 缩放问题：只需缩放画布包装。

   <div id="placeholder2" style="width:420px;height:210px;margin-top:40px;"></div>
   

   将画布缩放到与 css 变换相同的大小

   <div id="placeholder2" style="transform:scale(.7)"></div>
   

   但保持正确的条形值并将工具提示显示在正确的位置。