jQuery UI Tabs and Highcharts display/rendering is

2019-02-02 08:55发布

站内问答 / 后端开发
1626 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:29

add class="chart" to all highcharts containers inside tabs.

add this jQuery code:

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)