Javascript 标签未正确放置在flot条形图上

我正在使用jquerymobile和flot图表开发一个应用程序

我有三个标签。 我在第一个选项卡上显示我的图表。但是奇怪的是，如果我在第一个选项卡上绘制图表，那么我的标签就会放错位置。这是小提琴

但若假设我在第二个或第三个选项卡中绘制图表，那个么我的图表是正确的。我的密码在这里

---

为什么会发生这种情况？

似乎

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值

更新的演示：



似乎
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值

更新的演示：



我明白了。
我只需要将
plot.Offset（）
更改为
plot.getPlotOffset（）
然后它就可以正常工作了

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

getPlotOffset（）--
获取网格作为对象在画布中的偏移量
与画布边缘的距离为“左”、“右”、“顶”，
“底部”。也就是说，如果你在画布上画一个圆心的圆圈
放置在（左，顶部），其中心将位于最顶部，最左侧
网格的一角。
我找到了。
我只需要将
plot.Offset（）
更改为
plot.getPlotOffset（）
然后它就可以正常工作了

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

getPlotOffset（）--
获取网格作为对象在画布中的偏移量
与画布边缘的距离为“左”、“右”、“顶”，
“底部”。也就是说，如果你在画布上画一个圆心的圆圈
放置在（左，顶部），其中心将位于最顶部，最左侧
网格的一角。
问题与
ui内容的
padding
值有关，因为我一直在试验jsfiddles。。。但试图解决这一问题是另一回事：-（你确定它与填充有关吗？。因为它适用于第二个选项卡。我认为在第一个选项卡中，打印开始时，甚至认为文档还没有准备好。并且根据条宽和高度动态调整错位的标签。我对flot很陌生，但看起来确实很奇怪……我更新了你的点击按钮触发绘图的代码，当图表在第一个选项卡上时，没有绘制标签。第二个选项卡工作正常！！！祝你好运！谢谢伙计！！！尝试这件令人困惑的事情…我的头从大约4个小时开始旋转：p问题与
ui内容
的
填充值有关正在使用jsfiddles进行enting…但尝试修复它是另一回事：-（你确定它与填充有关吗？。因为它适用于第二个选项卡。我认为在第一个选项卡中，打印开始时，甚至认为文档还没有准备好。并且根据条宽和高度动态调整错位的标签。我对flot很陌生，但看起来确实很奇怪……我更新了你的点击按钮触发绘图的代码，当图表在第一个选项卡上时，没有绘制标签。第二个选项卡工作正常！！！祝你好运！谢谢朋友！！！尝试这件令人困惑的事情…我的头从大约4小时开始旋转：P将硬编码这个ctx。翻译（7，3）；将影响不同的布局？为什么不同选项卡中的图形具有不同的高度？顺便说一句，这些值仍然可以使顶部标签位于框边顶部：或者全部位于框边顶部。这可能是一个单独的问题。是否会硬编码此ctx.translate（7，3）；将影响不同的布局？为什么不同选项卡中的图形具有不同的高度？顺便说一句，这些值仍然可以使顶部标签位于方框边缘的顶部：或者全部放在一起。这可能是一个单独的问题。