jqplot不顯示在jquery頁面

我正在使用jqmobile頁面在html5應用程序的頁面之間切換。一頁包含一張jqplot圖表。jqplot不顯示在jquery頁面

這裏是我的代碼：

<div data-role="page" id="page-two" data-title="Page 2"> 
      <div id="chart1" style="height:100%;width:100%;"></div> 
     </div> 




// javascript 
$(document).delegate("#page-two", "pageshow", function() { 

          var plot2 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]], { 
                // Give the plot a title. 
                title: 'Plot With Options', 

                axesDefaults: { 
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
                }, 

                axes: { 
                xaxis: { 
                label: "X Axis", 

                pad: 0 
                }, 
                yaxis: { 
                label: "Y Axis" 
                } 
                } 
                }); 
          });

它看起來像圖是一種渲染的......這裏的頁面 enter image description here

的圖片圖表具有正確的數據輸入，因爲它工作時，我在另一頁上測試過它。我無法從圖表本身的高度和寬度屬性中更改該空白空間的高度或寬度。我也擁有所有正確的JavaScript文件。

有誰知道發生了什麼事？

來源

2013-09-23 pj409

如果使用id =「page-two」'的父容器的高度和寬度的高度和寬度爲0，則即使使用height：100％，子容器的高度和寬度也爲0。 '和'寬度：100％'規則。 –

父母是身體，它的寬度和高度都是100％ – pj409

我相信我的第一條評論措辭很差。 'chart1'的容器是'page-two'。如果'page-two'沒有高度，或者它沒有寬度，那麼'chart1'也不會。因此，如果'page-two'沒有定義'height：100％'（爲了從body繼承），它將會有一個'height = 0'，並且會級聯到圖表。 –

確保您已包含jqplot.canvasAxisLabelRenderer.min.js。

來源

2013-09-23 20:32:03

。該代碼在另一個應用程序中工作。當我嘗試將圖表放入一個jqmobile頁面時，會發生問題 – pj409

我解決了這個問題......它看起來像是我的一個愚蠢的錯誤。

Jquery .js文件必須在標頭中的jqplot .js文件之前出現！

來源

2013-09-24 18:32:53 pj409

jqplot不顯示在jquery頁面

回答

相關問題