jQuery UI Tabs and Highcharts display/rendering is

2019-02-02 08:55发布

站内问答 / 后端开发
1625 13 5

Anyone ever used the tabs (jquery-ui-1.8.9) and pie charts from Highcharts 2.1.4 together? To put it simply, I have multiple tabs, where each tab shows a pie chart with different data. The charts DO render to the divs, but when I click on the 2nd tab, the chart somehow shows up 300px to the right of where it's suppose to be. Whenever I zoom in or out of the browser window, the chart goes back to the correction position.

My code:

//Suppose the number tabs are generated based on variable $count, and there are 2 tabs 

<script type="text/javascript">

var chart_tab_<?=count?>;

$(document).ready(function() {
    chart_tab_<?=count?> = new Highcharts.Chart({
      chart: {
         renderTo: 'chart_tab_<?=count?>',
         // blah blah
      }

<body>
    <div id="chart_tab_<?=count?>"></div>
</body>

Again, the chart renders, but on the 2nd tab the display is bugged.

Update: I know that this KIND OF fixes the problem:

<script type="text/javascript"> 
   $(document).ready(function() {
      $( "#tabs" ).tabs({
          cookie: { expires: 1 }
      });
      $( "#tabs" ).tabs({
          select: function(event, ui) { window.location.reload(); }
      });
   });

But it's really crappy because the page has to be reloaded every time a user clicks on the tab. Any ideas would be great.

13条回答
叼着烟拽天下
2楼-- · 2019-02-02 09:03

The best solution is in callback function of tabs or when click on each tab, reflow highchart. Look at it:

Chart.reflow and this link jsfiddle and also this code that you have add in tab callback:

$('#chart-1').highcharts().reflow();
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2019-02-02 09:03

This worked for me after adding the class name (contains-chart) in the tabs

jQuery(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
            jQuery(".contains-chart").each(function () { // target each element with the .contains-chart class
                var chart = jQuery(this).highcharts(); // target the chart itself
                chart.reflow() // reflow that chart
            }
查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2019-02-02 09:09

I ran into same problem, the reflow() method works for me. I grasp the corresponding chart by access the global Highcharts variable. Here the order of charts is order of tabs.

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            show: function (event, ui) {
                var chart = Highcharts.charts[ui.index];
                if (chart != null) {
                    chart.reflow();
                }
            }
        });
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
放我归山
5楼-- · 2019-02-02 09:11

You should manually trigger resize event

$(window).trigger('resize');
查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-02-02 09:15

I had a similar issue in that my charts were rendering on the client with zero width whenever the chart was on a tab that was not activated by default. This answer was inspired by ojreadmore's answer. Instead of using the document ready event of jQuery to initialize your highchart, you should instead use the activate event of your the tab your chart is on. This has the added benefit of doing the snazzy chart animation each time the user clicks the tab.

Instead of:

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Use:

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
7楼-- · 2019-02-02 09:19

This is my solution (only tested in Safari and Firefox). It works great if you want to load the chart into a hidden tab on a page with flexible width. The chart resize if the browser window is resized.

In the chart settings, set the width of the chart from the tab that opens on page load (using jQuery to get the width):

   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       type: 'column',
       width: $('#tab-1').width()
     },
     ....

The following function adjusts width if the browser window is resized. 500 is the height. This is done automatically if the width is not specified in the chart options.

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)