highcharts 未在 jquery 移动选项卡中呈现图表

Question

我有 jquery 带有几个选项卡的移动网站，我添加了一个 highcharts 条形图...数据来自 table.. 但问题是图表是在第二个选项卡中不可见。

经过一些研究后，我发现添加 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

任何帮助将不胜感激

Answer 1

我们需要包含 data.js 才能正常工作..

感谢 Paweł Fus

highcharts 未在 jquery 移动选项卡中呈现图表

highcharts not rendering chart inside jquery mobile tab

javascript

jquery

highcharts

jquery-mobile