引导选项卡中的 highcharts 图表未正确显示答案

【问题标题】：highcharts graphs in bootstrap tabs are not displaying properly引导选项卡中的 highcharts 图表未正确显示
【发布时间】：2016-08-03 11:39:58
【问题描述】：

我有两个选项卡，选项卡 1 和选项卡 2，最初加载页面时，同时加载第一个选项卡中的图形，这正好适合 col-md-6，现在，当我单击选项卡 2 ，该选项卡中的图表几乎折叠到第一个图表的一半，我希望它也适合col-md-6 正确无误，我做错了什么吗？

请看看这个jsfiddle

【问题讨论】：

见this question。它是由隐藏元素的宽度引起的，浏览器不会计算它。
@PawełFus 我阅读了 ryenus 的回答，但是当我调整浏览器窗口大小时问题仍然存在。
也试试我的解决方案，例如：render chart at the beginning, but after tab click call chart.reflow()。
@PawełFus 你能不能试着编辑我的jsfiddle，我自己试过但没有收获，可能是我做错了，我刚刚在标签上添加了这一行$('#graph-container-gray').highcharts().reflow() 2点击事件，不是吗？
查看 Udhay Titus 的回答。

标签： jquery css twitter-bootstrap highcharts tabs

【解决方案1】：

使用这个 jquery 选项卡选择功能，它将解决您的问题。

here is modified fiddle click here

 jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( "#graph-container-gray, #graph-container-red" ).each(function() {
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})

【讨论】：

这太完美了，非常感谢.. +1000 :)

【解决方案2】：

看看这个小提琴 Click To View

<div class="tab-content">
                <div class="tab-pane active" id="1">
                    <div class="col-md-6">
        <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                </div>

                </div>
                <div class="tab-pane active" id="2">
                <div class="col-md-6">
                        <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                    </div>
                </div>
            </div>

【讨论】：