2013-04-25 73 views
2

我想用jqplot來繪製從SQLite數據庫爲Phonegap檢索數據的條形圖圖 - Android如何使用相同的代碼爲db值。此代碼與靜態數據在標記內工作良好,但是當我嘗試將此代碼放入$('#pageid').live('pageinit',function(){});內部時,它不起作用。什麼原因?jqplot不適用於動態數據

<head> 
<script type="text/javascript" src="js/lib/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/lib/jquery.jqplot.js"></script> 
<script type="text/javascript" src="js/lib/jqplot.barRenderer.js"></script> 
<script type="text/javascript" src="js/lib/jqplot.categoryAxisRenderer.js"></script> 
<script type="text/javascript" src="js/lib/jqplot.pointLabels.js"></script> 
<link rel="stylesheet" href="css/lib/jquery.jqplot.css"/> 
<script type="text/javascript"> 
var s1 = [10,0,0,0,0]; 
var s2 = [0,20,0,0,0]; 
var s3 = [0,0,30,0,0]; 
var s4 = [0,0,0,25,0]; 
var s5 = [0,0,0,0,0]; 
var ticks = ['FAJR', 'ZOHAR', 'ASR', 'MAGHRIB','ISHA'];  

var plot1 = $.jqplot('chart1', [s1, s2, s3,s4,s5], { 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
     seriesDefaults:{ 
      title:'Namaz Vs MissingPrayer', 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {fillToZero: true} 
     }, 
     series:[ 
       {label:'Fajr'}, 
       {label:'Z'}, 
       {label:'A'}, 
       {label:'M'}, 
       {label:'I'} 


      ], 
      legend: { 
       show: true, 
       placement: 'outsideGrid' 
      }, 
      axes: { 
       // Use a category axis on the x axis and use our custom ticks. 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        label:'NAMAZ', 
        ticks: ticks, 

       }, 
       // Pad the y axis just a little so bars can get close to, but 
       // not touch, the grid boundaries. 1.2 is the default padding. 
       yaxis: { 
        min:0, 
        label:'MISSING PRAYERS', 
        pad: 1.05, 
        tickOptions: {formatString: '%d'} 
       } 
      } 
     }); 
}); 
</script> 
</head> 
<body> 
<div data-role="page" id="graph"> 
<div data-role="content"> 
<div id="chart1" style="width:600px; height:350px;"></div> 
</div> 
</div> 
</body> 

</div> 

回答

1

你需要把它放在一個pageshow事件中。

僅在pageshow事件期間才能正確計算頁面高度。如果你正在使用jQuery版本1.9.1+,那麼你不能使用live,因爲它被廢棄,不再存在

$(document).on('pageshow','#pageid',function(){}); 

另外:

所以使用它像這樣。

+0

是它的工作正常http://api.jquerymobile.com/pageshow/但請讓我知道如何通過點擊更新或刷新按鈕更新圖 – nida 2013-04-27 11:37:12

+0

如何刷新jqplot條形圖從SQLITE- DB – nida 2013-04-29 12:10:52

+0

使用.replot()函數 – Gajotres 2013-04-29 12:16:51

相關問題