highcharts不呈現圖表裏面的jQuery的移動選項卡

-1

我有幾個選項卡的jquery移動網站，我已經添加了一個高圖條形圖...數據是從一個表中..但問題是，圖表不可見在第二個標籤中。highcharts不呈現圖表裏面的jQuery的移動選項卡

做一些研究，我發現，添加reflow()會工作，所以之後我加入了下面的代碼，仍然圖表犯規負載

var chart = $("#container_chart").highcharts(); // target the chart itself 
chart.reflow() // reflow that chart

下面是我的全部JS代碼

<script type='text/javascript'> 

    $(document).delegate("#property_page", "pagecreate", function() { 

      var chart = $('#container_chart').highcharts({ 
       data: { 
        table: 'datatable' 
       }, 

       chart: { 
        type: 'column', 

        events: { 
         tooltipRefresh: function(e) { 
          if (!e.target.hoverSeries) return; 
          $('.highcharts-tooltip>path:last-of-type') 
          .css('fill', e.target.hoverSeries.color); 
         } 
         } 
       }, 
       title: { 
        text: 'Charts' 
       }, 
       credits:false, 
       labels: { 
        format: '{value}' 
       }, 
       yAxis: { 
        allowDecimals: false, 

        title: { 
         text: '' 
        } 
       }, 
       xAxis: { 
        gridLineWidth: 1, // New value 
        gridLineColor: '#DCEBEF', 
        lineColor: '#ffffff', 
        lineWidth: 1, 
        crosshair: false, 
        type: 'category', 

        tickmarkPlacement: 'between', 

        plotLines: [{ 
         color: '#FF0000', // Red 
         width: 2, 
         value: 5.5 // Position, you'll have to translate this to the values on your x axis 
        }] 

       }, 
       colors: [ 
         '#33a9ec', 
         '#ec3342', 

        ], 
       legend: { 

        align: 'center', 
        verticalAlign: 'top', 

        backgroundColor: null, 
       }, 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 1, 
        y2: 0 
       }, 

       tooltip: { 
        backgroundColor: null, 
        borderWidth: 1, 
        borderColor: null, 

        }, 
      }); 

      var chart = $("#container_chart").highcharts(); // target the chart itself 
      chart.reflow() // reflow that chart 
     }); 
     </script>

HTML

<div id="container_chart" class="container_chart" style="min-width: 310px; height: 400px;"></div> 

<table id="datatable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Distribution</th> 
      <th>Return</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>2011</th> 
      <td>6250</td> 
      <td>6250</td> 
     </tr> 
     <tr> 
      <th>2012</th> 
      <td>28205</td> 
      <td>40000</td> 
     </tr> 
     <tr> 
      <th>2013</th> 
      <td>26000</td> 
      <td>34750</td> 
     </tr> 
     <tr> 
      <th>2014</th> 
      <td>32500</td> 
      <td>10000</td> 
     </tr> 

    </tbody> 
</table>

您也可以按順序瀏覽這裏http://vidznet.com/debug/tabs.html

頁面的任何幫助將不勝感激

來源

2017-05-05 LiveEn

你不加載任何數據到圖表。 'data'選項需要'data.js'模塊，請參閱[docs]（http://api.highcharts.com/highcharts/data）:) –

非常感謝..它現在可以運行:) – LiveEn

我們需要包括它的工作..

感謝帕維爾畢淑敏

來源

2017-05-08 18:54:31 LiveEn

highcharts不呈現圖表裏面的jQuery的移動選項卡

回答

相關問題