我想显示海军报生成的图表在jQuery Mobile的项目。 如果我通过它的绝对路径（某物叫jQuery Mobile的页面一样： http://server.com/graph/fancy.php ）一切工作正常，但是当我开始使用JQM集成AJAX导航图表看起来炒。

我也发现了这个其他话题 jQuery Mobile的和海军报图书馆，但没有所描述的解决方案，也为我工作。

有没有办法让JQM和海军报一起工作？很遗憾禁用AJAX也是不是一个选项。

图表生成：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
变种数据= [[0,3]，[4,8]，[8,5]，[9，13]];
$（函数（）{
    VAR情节= $ .plot（$（＃图），[
        {
            标签：哦海，
            数据：数据，
            酒吧：{显示：真}
        }
    ]）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; D​​IV ID =图的风格=宽度：600px的;高度：350像素;＆GT;＆LT; / DIV＆GT;
 

解决方案

您需要做的就是将你的绘图功能到 pageshow 事件。这是因为，海军报不占位符不可见内工作得很好。尝试这样的：

  $（'＃图）。绑定（pageshow'，函数（）{
    VAR情节= $ .plot（$（＃图），[
        {
        标签：哦海，
        数据：数据，
        酒吧：{
            显示：真
        }}
    ]）;
}）;
 

在这里的行动： http://jsfiddle.net/MT22y/8/

I am trying to display a flot generated chart in a jQuery Mobile project. If I call the jQuery Mobile page by its absolute path (sth. like: http://server.com/graph/fancy.php) everything works fine, but as soon as I start using the jQM integrated AJAx navigation the chart looks scrambled.

I also found this other topic jquery mobile and flot library, but none of the described solutions do work for me.

Is there a way to get jQM and flot working together? Unfortunatelly disabling AJAX is also not an option.

The chart generation:

<script type="text/javascript">
var data = [[0, 3], [4, 8], [8, 5], [9, 13]];
$(function () {
    var plot = $.plot($("#chart"), [
        {
            label: "Oh hai",
            data: data,
            bars: { show: true }
        }
    ]);
});
</script>
<div id="chart" style="width: 600px; height: 350px;"></div>

What you need to do is move your plot function into a pageshow event. This is because flot doesn't work well within placeholders that are not visible. Try it like this:

$('#graph').bind('pageshow', function() {
    var plot = $.plot($("#chart"), [
        {
        label: "Oh hai",
        data: data,
        bars: {
            show: true
        }}
    ]);
});

In action here: http://jsfiddle.net/MT22y/8/