Question

有人曾经使用jquery-ui-1.8.9标签（Highcharts 2.1.4）和饼图吗？简单来说，我有多个标签，每个标签显示一个包含不同数据的饼图。图表会渲染到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>

同样，图表会呈现，但在第二个标签页上会显示错误信息。

更新：我知道这个KIND OF解决了这个问题：

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

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

Answer 1

这是我的解决方案（仅在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);       
});

Answer 2

为了使Highcharts在隐藏的jQuery选项卡中工作所需的修改。默认情况下， jQuery将display：none设置为隐藏选项卡，但是使用这种方法，Highcharts无法使用获得元素的真实宽度和高度。相反，我们绝对定位它并将其移离视口。

 <style type="text/css">
.ui-tabs .ui-tabs-hide {
     position: absolute;
     top: -10000px;
     display: block !important;
}           
 </style>

添加示例： http://www.highcharts.com/studies/jquery-ui-tabs.htm

Answer 3

第二张图表可能已关闭，因为它在您绘制时听起来像是隐藏的。尝试在选择时绘制图表。

这是一些伪代码，可以让您了解我的想法。这没有经过测试。

$("#tabs").tabs({
  select: function(event, ui) {
     var chart = new Highcharts.Chart({
      chart: {
       renderTo: ui.panel.id,
       // blah blah
      }
     });

  }
});

Answer 4

您应该手动触发调整大小事件

$(window).trigger('resize');

Answer 5

最好的解决方案是在标签的回调功能中，或者当点击每个标签时，重排高级图。看看它：

Chart.reflow 和这个链接 jsfiddle以及您在标签回调中添加的此代码：

$('#chart-1').highcharts().reflow();

Answer 6

较小的解决方法是在CSS中使用静态宽度（如果你知道它应该是什么） -

.tab-pane { width: 1200px; }

Answer 7

我有一个jQuery手风琴，打开乱码图表......这是我的解决方案：

首先将图表填入全局：window.myNamespace.charts。＃{container_id}，然后在我的手风琴中我这样做：

$('#my-accordion').accordion
  ...,
  change: () ->
    chartId = ui.newContent.find('.highcharts-container').parent().attr('id')
    window.myNamespace.charts[chartId].setSize(248,220) if chartId?

以上是coffeescript，但它应该很容易翻译......

基本上我在图表上调用setSize将其设置为它已经是的大小......这有效的是在打开后清理图表...我承认这只是一个解决方法..理想情况下，highcharts修复了bug并使用了我给它们的大小而不是试图从隐藏元素中计算大小

Answer 8

嗨，请看我的小提琴jsfiddle

...
$("#tabs").tabs();
var ids = ['chart-1', 'chart-2', 'chart-3'];
for (var i = 0, j = ids.length; i < j; i++) {
    if ((container = $('#'+ids[i])).size()) {
        if (container.width()==0) {
            container.width(container.actual('width'));   
        }

        oclone = $.extend({}, options);
        oclone.chart.renderTo = ids[i];
        new Highcharts.Chart(oclone);
    }

}
...

Answer 9

我遇到了类似的问题，因为只要图表位于默认情况下未激活的选项卡上，我的图表就会在客户端呈现零宽度。这个答案的灵感来自于ojreadmore的答案。您应该使用图表所在选项卡的activate事件，而不是使用jQuery的文档就绪事件来初始化您的高图。每次用户单击选项卡时，这样做的另一个好处就是可以执行时髦的图表动画。

而不是：

$(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]
        }]
    });
});

使用：

$('#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]
        }]
    });
});

Answer 10

jQuery UI 1.9+改变了隐藏标签的方式，你应该以这种方式激活标签时设置自己的类：

$('#tabs').tabs({
  beforeActivate: function (event, ui) {
    $(ui.oldPanel).addClass('ui-tabs-hide');
    $(ui.newPanel).removeClass('ui-tabs-hide');
  }
});

结合以下CSS：

.ui-tabs-hide { 
  display: block !important; 
  height: 0!important; 
  width: 0!important; 
  border:none!important; 
}

这也将修复任何Flash嵌入对象无法在隐藏标签中正确加载。

Answer 11

我遇到了同样的问题，reflow（）方法对我有用。我通过访问全局Highcharts变量来掌握相应的图表。这里图表的顺序是标签的顺序。

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            show: function (event, ui) {
                var chart = Highcharts.charts[ui.index];
                if (chart != null) {
                    chart.reflow();
                }
            }
        });
    });
</script>

Answer 12

将class="chart"添加到标签内的所有highcharts容器中。

添加此jQuery代码：

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})

Answer 13

在标签

中添加类名（包含图表）后，这对我有用

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
            }

jQuery UI选项卡和Highcharts显示/呈现问题

13 个答案: