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重建为：

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

您可以参考此fiddle。

Answer 2

在你的js-fiddle中对我有用的只是简单地说“宽度：100％;”以你的内联风格

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

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

2 个答案: