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

回答

相關問題