Question

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

在做了一些研究之后我发现添加// Simple GET request example: $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. });会有效，所以我添加了下面的代码，但图表仍未加载

reflow()

以下是我的完整JS代码

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

HTML

 <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>

您还可以在此处查看页面http://vidznet.com/debug/tabs.html

任何帮助将不胜感激

Answer 1

我们需要包含data.js才能使其发挥作用..

感谢PawełFus

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

1 个答案: