2011-12-06 17 views
0

同じ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.

答えて

2

が共通の問題であり、回避策はpageInitを()

使用し、jquerymobileとバギー...

ドント使用文書の準備ができてit's jqueryフォーラムではこのスレッドが見つかりましたが、静的データで動作しますが、jquerymobileのjson呼び出しでjqplotを動作させることはありません。

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

幸運!

1

はjqmobileで使用する、jqplotを愛してる、これは、この試す試す:

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

(私の場合で働いていた)もっと簡単な方法があります:

- 最初:はあなたをdelareをプロットコンテナdivページ外(例:本体タグ):

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

- その後、は({ここ ... ... を}関数())あなたの$(ドキュメント).readyにプロット(グラフ)を設定します。と、それはページ間表示されませんので、それを隠す:

$("#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> 

希望を!

関連する問題