17

有人曾经一起使用过标签 ( 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>

再次，图表呈现，但在第二个选项卡上显示被窃听。

更新：我知道这种解决了问题：

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

但这真的很糟糕，因为每次用户单击选项卡时都必须重新加载页面。任何想法都会很棒。

4

13 回答 13

12

这是我的解决方案（仅在 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);       
});
于 2012-12-09T17:59:00.480 回答
6

需要修改才能使 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

于 2012-04-07T18:26:07.673 回答
4

第二个图表可能是关闭的，因为它听起来好像在你绘制它时被隐藏了。尝试在选择时绘制图表。

这是一些伪代码，可以让您了解我的想象。这未经测试。 

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

  }
});
于 2011-04-27T15:19:21.497 回答
3

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

$(window).trigger('resize');
于 2014-02-10T20:50:13.557 回答
2

最好的解决方案是在选项卡的回调函数中，或者当点击每个选项卡时，回流高图。看它：

Chart.reflow 和此链接 jsfiddle以及您在选项卡回调中添加的此代码：

$('#chart-1').highcharts().reflow();
于 2014-05-16T18:53:33.170 回答
1

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

.tab-pane { width: 1200px; }
于 2012-08-21T20:03:38.977 回答
0

嗨，看看我的小提琴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);
    }

}
...
于 2013-02-01T09:39:41.990 回答
0

我遇到了同样的问题，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>
于 2014-07-01T08:45:30.513 回答
0

我有一个 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修复错误并使用我给它们的大小，而不是尝试从隐藏元素计算大小

于 2012-04-11T14:33:25.283 回答
0

我有一个类似的问题，每当图表位于默认情况下未激活的选项卡上时，我的图表就会以零宽度呈现在客户端上。这个答案的灵感来自 ojreadmore 的答案。与其使用 jQuery 的文档就绪事件来初始化您的 highchart，不如使用图表所在选项卡的激活事件。这有一个额外的好处，即每次用户单击选项卡时都会制作时髦的图表动画。

代替：

$(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]
        }]
    });
});​
于 2013-02-06T03:56:23.657 回答
0

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 嵌入对象。

于 2013-02-08T17:51:06.480 回答
0

添加class="chart"到选项卡内的所有 highcharts 容器中。

添加这个jQuery代码：

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
于 2016-06-03T21:03:13.207 回答
0

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

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
            }
于 2017-07-29T02:06:38.983 回答