标签没有正确放置在flot条形图上

Question

我正在使用jquery mobile和flot chart开发一个应用程序。

在那里我有3个标签。 我在第一个标签上显示我的图表。但是发生的奇怪事情是，如果我在第一个标签中绘制图形，那么我的标签就会被错放。这里是小提琴jsFiddle code

但是如果我假设我在第二个或第三个标签中绘制我的图表，那么我的图表是正确的。我的代码在jsfiddle code

为什么会这样？

Answer 1

似乎plotOffset计算方法与您的标签不同，取决于容器是否可见。我认为这是因为jQuery无法计算隐藏display: none的元素的高度。在第一个例子中，plotOffset给出了这个数字：

{left: 22, top: 41}

而第二次

{left: 7, top: 4}

当你打电话给ctx.translate(plotOffset.left, plotOffset.top);时，你的画布显然会有不同的标签位置。

最简单的解决方法是使用以下内容标准化您的翻译：

ctx.translate(7, 3); // No need to care of plotOffset left and top

使用静态定义的标签边距而不是plotOffset值。

更新了演示：
http://jsfiddle.net/Sp8MP/5/
http://jsfiddle.net/Sp8MP/6/

Answer 2

我明白了。 我只需要将plot.Offset()更改为plot.getPlotOffset() 然后它正常工作。

offset（） -     返回网格内相对的绘图区域的偏移量     到文档，例如用于计算鼠标     位置（event.pageX / Y减去此偏移量是像素位置     在情节内。）

getPlotOffset（） -     获取网格在画布中作为对象的偏移量     与画布边缘的距离为“左”，“右”，“顶部”，     “底部”。即，如果你在画布上用中心画一个圆圈     放置在（左侧，顶部），其中心位于最顶部，左侧     网格的一角。