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

标签 javascript jquery html css highcharts

<分区>

我所做的是这样的:

  1. 我有很多情节(比如 30 个)需要展示。
  2. 我将这 30 个地 block 分成几组(比如 3 组)。
  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({...})
})

最佳答案

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

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

可以引用这个fiddle .

关于javascript - Highcharts 的宽度未在隐藏的 div 处正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29340491/

上一篇:jquery - 更改 Bootstrap 下拉插入符号

下一篇:html - html元素的固定位置

相关文章:

jquery - 如何在select2框架中使用占位符作为默认值

javascript - jQuery Ajax 和重定向来自服务器的响应

html - 基本 CSS/布局问题 - 动态列?

javascript - 发布后 div 中不显示任何内容

javascript - 删除按钮的父级

javascript - 如何通过 jQuery 动态添加元素

jquery - 仅在出现弹出窗口时加载 img

javascript - 无法在窗口调整大小事件上切换属性和类

php - 如何制作 Firefox,不缓存我的网站

javascript - 使用标签样式的复选框的不确定 CSS 样式