Highcharts 的宽度未正确呈现在隐藏 div

Question

我所做的是这样的：

我有很多情节（比如 30 个）需要展示。
我将这 30 个地块分成几组（比如 3）。
页面加载时。这些图都是从 ajax 请求加载的，而只会显示一组（取决于用户点击的按钮）

现在，问题是，每个情节都被一个 div 包裹着，它有一个最小宽度，在我第一次加载页面时，其中 20 个被隐藏了。

当用户点击按钮显示另一组绘图时，宽度设置不正确。

我写了一个非常快速的演示来展示我的问题：http://jsfiddle.net/k5adky9d/4/

<div id="wrapper" style="min-width:300px; display:none"><!--please remove the display:none here to view the correct results-->
 <h2>plot subject</h2>
  <div id="container" style=" height: 400px; margin: 0 auto" >
  </div>

$(function () {
    //$('#wrapper').hide();//I can also use hide() here if the originally 'display' is not set to none
    $('#btn').on('click',function(){
        $('#wrapper').show();//after show, the plot'width is not adjust to what it should be, it only adjust the the min-width(300px)        
    });
    $('#container').highcharts({...})
})

Answer 1

在你的 js-fiddle 中对我有用的是简单地将 "width:100%;" 放在你的内联样式中，就像这样

 <div id="container" style="width:100%; min-width: 300px; height: 400px; margin: 0 auto" >

Answer 2

尝试将你的 JS 重构成这样：

$(function () {
    $('#btn').on('click', function () {
        $('#wrapper').show(function () {
          .....<highcharts code here>...
        });
    });
});

你可以参考这个fiddle。

Highcharts 的宽度未正确呈现在隐藏 div

Highcharts 's width is not correctly rendered at a hidden div

javascript

jquery

html

css

highcharts