highcharts图被显示不正常

我有两个标签，标签1和片2，当最初加载的网页，在所述第一标签中的图表的同时被加载，这是col-md-6嵌合右，现在，当我点击选项卡，在该选项卡中的图形被昏倒几乎一半的第一个，我希望它也适合在col-md-6权和罚款，有什么我做错了吗？highcharts图被显示不正常

请看看这个jsfiddle

来源

2016-08-03 Bilal Ahmed

参见[这个问题]（http://stackoverflow.com/questions/17206631/why-are-bootstrap-突片-显示标签窗格-的div与 - 不正确-宽度- - 使用时）。这是由隐藏元素的宽度引起的，浏览器不计算它。 –

@PawełFus我读了ryenus的回答，但问题仍然存在时，我调整浏览器窗口的大小。 –

也试试我的解决方案，例如：'渲染图开头，但选项卡中单击呼叫chart.reflow后（）'。 –

使用这个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 
    }); 
})

来源

2016-08-03 11:51:29

问题依然存在于你的小提琴中。请确保只保留结果窗格 – ganesshkumar

是的，问题依然存在，当我将浏览器窗口调整为较小的尺寸，然后刷新页面时，它必须具有移动或平板视图，但它需要'min-width：94 ％'，这仍然不是解决方案，调整窗口大小然后切换选项卡，你将会有所不同。 –

我更新了我的答案看到这个小提琴https://jsfiddle.net/r9dt5j4n/6/ –

采取看看这个小提琴 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>

来源

2016-08-04 05:15:19

highcharts图被显示不正常

回答

相关问题