带有flot和AJAX导航的jQuery Mobile

我试图在jQuery Mobile项目中显示flot生成的图表。如果我通过它的绝对路径调用jQuery Mobile页面（例如：http://server.com/graph/fancy.php），一切正常，但只要我开始使用jQM集成的AJAx导航，图表看起来很乱。带有flot和AJAX导航的jQuery Mobile

我还发现这个其他主题jquery mobile and flot library，但没有一个描述的解决方案为我工作。

有没有办法让jQM和flot一起工作？不幸的是，禁用AJAX也不是一种选择。

的图表生成：

<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>

来源

2011-06-16 Max

你能在http://jsfiddle.net/发布一个例子吗？ – Jivings 2011-06-16 10:03:57

这里你去：http://jsfiddle.net/MT22y/5/ 请注意，在我的应用程序图形页面实际上是在一个单独的文件，但错误总是显示出来（注意y轴） – Max 2011-06-16 10:32:49

您需要做的是将您的绘图功能移动到pageshow事件中。这是因为flot在不可见的占位符内无法正常工作。试着这样说：

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

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

来源

2011-06-16 15:34:08 Ryley

很好的答案，我不知道。 – Jivings 2011-06-17 07:53:06

我也没有，谢谢！ – Max 2011-06-17 09:06:25

我想你最好只是重写样式的图形元素。例如，我通过添加填充将图移动到一边：http://jsfiddle.net/MT22y/7/，以便它不再覆盖轴。

您可能需要使用一些样式和宽度，但这可能是最简单的方法。

来源

2011-06-16 11:46:01 Jivings

带有flot和AJAX导航的jQuery Mobile

回答

相关问题