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的移动选项卡

回答

相关问题