jqplot衝突與jquerymobile

在同一個html頁面我需要使用jquerymobile（www.jquerymobile.com）和繪製一個簡單的圖表與jqplot js庫（www.jqplot.com）。jqplot衝突與jquerymobile

我想我有jqplot和jquerymobile之間的衝突問題，因爲圖表不顯示。但是，如果我評論jquerymobile腳本的圖表變得可見。

這是我的HTML代碼的一部分：

[...head...] 
<link rel="stylesheet" type="text/css" href="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.css" /> 

<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script> 

<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.js"></script> 
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasTextRenderer.min.js"></script> 
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 

[...script...] 
$(document).ready(function() { 
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); 
}); 

[...body...] 
<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>

任何建議爲解決衝突？也許我想念什麼？

由於提前， M.

來源

2011-12-06 matteo.poletti

是一個常見的問題，解決辦法it's車...

請勿使用文檔準備與jquerymobile，使用pageInit（）

在jquery論壇發現這個線程，它的工作與靜態數據，但我從來沒有使jqplot工作jQuery的jQuery調用jquerymobile。

http://forum.jquery.com/topic/ajax-problem-jquery-mobile-with-jqplot

祝你好運！

來源

2011-12-06 14:30:12

我愛jqplot，與jqmobile使用試試這個試試這個：

<script> 
$('#thirdpage').live('pageshow', function() { 
    $.jqplot('chart1', [[[1, 4],[3,7.10],[5,6],[7,3],[9,95.9],[121,416]]]); 
}); 
</script> 

     <!-- Page Three --> 
    <section id="thirdpage" data-role="page"> 
     <header data-role="header"> 
     <h1>Charts</h1> 
     </header> 
     <div data-role="content"> 

     <a href="#firstpage" id="firstpage">PageOne</a> 
     <a href="#secondpagepage" id="secondpage">Page2</a> 


    <div id="chart1" style="height:300px; width:500px;"></div> 

     </div> 
      </section>

來源

2012-07-02 19:59:55 Zeb99

還有一個更簡單的方法（在我的情況下工作）：

- 第一： delare你繪製集裝箱格以外的任何頁面（例如正好低於標籤標籤）：

<body> 
<div id="plotContainer"></div> 
...

- 則：集劇情（圖）在你的$（文件）。就緒（函數（）{... 這裏 ...}）;和隱藏，這樣就不會在頁面之間顯示：

$("#jqxChart").jqxChart(settings); 
$("#jqxChart").hide();

- finaly：只是DIV隨着劇情複製你的頁面內：

<script> 
$('#page_ID').bind('pageshow', function(data) { 
$("#jqxChart").appendTo("#ID_of_DIV_you_want"); 
$("#jqxChart").show(); 
$('#jqxChart').jqxChart('refresh'); 
}); 
</script>

希望這有助於！

來源

2014-09-10 08:06:19

jqplot衝突與jquerymobile

回答

相關問題