highcharts在引导选项卡图被显示不正常

Question

我有两个标签，标签1和标签2，当最初加载页面，在第一标签中的图是在同一时间，这是col-md-6配件右装，现在，当我点击选项卡，在该图标签被昏倒几乎一半的第一个，我希望它也适合在col-md-6权和罚款，有什么我做错了吗？

请看看这个jsfiddle

Answer 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
    });
})

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