在JQuery Mobile應用程序中顯示HighCharts

我有以下一段JQuery Mobile應用程序主頁的代碼片段。它基本上是一個帶有按鈕的簡單主頁面，該按鈕可重定向到另一頁面（'圖表1'），其中包含頁腳中的2個選項卡欄：其中一個用於其自身（'chart1'），另一個用於另一個頁面（'chart2'）。我想在加載這些頁面時在這兩頁的內容部分添加來自HighCharts庫的一些圖表。我嘗試了幾種方法（活，綁定等），但似乎沒有任何工作。顯示圖表的唯一方法是使用ready方法（見下文）。我的問題是：是否有一種方法在單擊按鈕時在頁面的特定區域顯示圖表？在JQuery Mobile應用程序中顯示HighCharts

方法加載圖表：

$(document).ready(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'containerYear', 
     type: 'column', 
     margin: [ 50, 50, 100, 80] 
    },...and so on 
});

主頁代碼：wihh其它JS繪圖框架中使用時

<div data-role="page" data-theme="b" id="main-page"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Data</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true"> 
      <li data-role="list-divider">Data</li> 
      <li><a href="#chart1" id="btn1" data-transition="slide">Graphs</a></li> 
     </ul> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>CTK</h4> 
    </div> 
</div> 

<div data-role="page" data-theme="b" id="chart1"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#main-page" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Car Crashes</h1> 
    </div> 
    <div data-role="content"> 
     <div id="containerYear"></div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#chart1" data-role="tab" class="ui-btn-active">Chart 1</a></li> 
       <li><a href="#chart2" data-role="tab" >Chart 2</a></li> 
      </ul> 
     </div> 
    </div> 

</div> 


<div data-role="page" data-theme="b" id="chart2"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#main-page" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Car Crashes</h1> 
    </div> 
    <div data-role="content"> 
     <div id="containerMonth"></div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#chart1" data-role="tab">Chart 1</a></li> 
       <li><a href="#chart2" data-role="tab" class="ui-btn-active">Chart 2</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

來源

2013-02-27 Anto

jQuery Mobile的是獨一無二的。他們只能與一個pageshow事件一起使用。

還有一件事，記得在jQuery Mobile初始化之後初始化HighCharts。

這裏有一個工作示例：http://jsfiddle.net/Gajotres/Eg9Xz/

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script>  
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#second" class="ui-btn-right">Next</a> 
     </div> 

     <div data-role="content"> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>    
</body> 
</html>

的Javascript：

$(document).on('pageshow', '#index', function(){  
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
       marginRight: 130, 
       marginBottom: 25 
      }, 
      title: { 
       text: 'Monthly Average Temperature', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: 'Source: WorldClimate.com', 
       x: -20 
      }, 
      xAxis: { 
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Temperature (°C)' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         this.x +': '+ this.y +'°C'; 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 0 
      }, 
      series: [{ 
       name: 'Tokyo', 
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
      }, { 
       name: 'New York', 
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
      }, { 
       name: 'Berlin', 
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
      }, { 
       name: 'London', 
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
      }] 
     }); 
    }); 

});

來源

2013-02-27 13:56:34 Gajotres

如果我不包括所需的圖表不顯示，但是如果我包括它，輸出顯示（我正在調試PC瀏覽器）。那麼這是否意味着當我將它部署在移動設備或平板電腦上時，它不會工作？ – 2014-07-17 06:17:31

在JQuery Mobile應用程序中顯示HighCharts

回答

相關問題