问题
I am developing an application using jquery mobile and flot charts.
In That i have 3 tabs. I am displaying my chart on the first tab.But the weird thing which is happening is that if i plot the graph in the first tab then my labels get misplaced.Here is the fiddle jsFiddle code
But if suppose i plot my graph in second or third tab then my charts are correct. My code is here jsfiddle code
why is this happening?
回答1:
Seems like plotOffset calculation is different for your tabs and depends on whether container is visible or not. I think this is because jQuery can not calculate the height of the element which is hidden with display: none. In the first example plotOffset give you this numbers:
{left: 22, top: 41}
while for the second
{left: 7, top: 4}
When you then call ctx.translate(plotOffset.left, plotOffset.top); you will obviously have different lables position on the canvas.
The simpliest workaround is would be to normalize your translation with something like this:
ctx.translate(7, 3); // No need to care of plotOffset left and top
Use staticaly defined label margins instead of plotOffset values.
Updated demos:
http://jsfiddle.net/Sp8MP/5/
http://jsfiddle.net/Sp8MP/6/
回答2:
I got it.
I just need to change plot.Offset() to plot.getPlotOffset()
Then its working correctly.
offset() -- Returns the offset of the plotting area inside the grid relative to the document, useful for instance for calculating mouse positions (event.pageX/Y minus this offset is the pixel position inside the plot).
getPlotOffset() -- Gets the offset that the grid has within the canvas as an object with distances from the canvas edges as "left", "right", "top", "bottom". I.e., if you draw a circle on the canvas with the center placed at (left, top), its center will be at the top-most, left corner of the grid.
来源：https://stackoverflow.com/questions/9428132/labels-not-getting-placed-properly-over-flot-bar-chart