jquery-ui-tabs – jQuery UI Tabs和Highcharts显示/呈现问题

前端之家收集整理的这篇文章主要介绍了jquery-ui-tabs – jQuery UI Tabs和Highcharts显示/呈现问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何人一起使用了Highcharts 2.1.4的选项卡(jquery-ui-1.8.9)和饼图?简单来说,我有多个选项卡,每个选项卡显示不同数据的饼图。图表可以渲染到div上,但是当我点击第二个选项卡时,图表会显示在它所在的右侧的300px。每当我放大或缩小浏览器窗口时,图表都会返回到修正位置。

我的代码

//假设数字标签是基于变量$ count生成的,并且有2个选项卡

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

同样,图表呈现,但是在第二个选项卡上,显示屏被发现。

更新:我知道这个种类修复了这个问题:

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

但是真的很糟糕,因为每次用户点击该标签时,页面都必须重新加载。任何想法都会很棒。

解决方法

这是我的解决方案(仅在Safari和Firefox中测试)。如果您想将图表加载到宽度宽的页面上的隐藏选项卡中,那么它的效果会很好。如果浏览器窗口调整大小,图表会调整大小。

在图表设置中,从页面加载时打开的选项卡设置图表的宽度(使用jQuery获取宽度):

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

如果浏览器窗口调整大小,以下功能可调整宽度。 500是高度。如果在图表选项中未指定宽度,则会自动进行。

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});
原文链接:https://www.f2er.com/jquery/182186.html

猜你在找的jQuery相关文章