删除“display：none”表格div后调整c3.js图表​​大小

Question

所以我有一个预加载元素的功能，并使用“display：none”来隐藏图表

<div class="col-sm-9 topTenWebCus" ></div>

javscript：

$(document).ready(function() {
    window.setTimeout(function(){
        $(".topTenWebCus").css("display","none");
        },200);
});

之后我又获得了另一个onclick功能来移除“display：none” css

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                    });

工作正常。但即使我在网站上插入引导程序，它也不会重新调整大小。

我正在考虑使用内部函数来执行.resize（）但它不起作用，是否有更好的方法来修复调整大小问题？

更新1：

如果用户更改缩放率，图表会自行调整大小。

我只想弄出一件重要的事情，如果缩放率是100％，图表会正确显示，但如果用户更改缩放率，图表将不会调整到合适的大小。

UPDATE2 我尝试使用.show（）和.hide（），但没有运气

示例解决方案

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                          chart.flush() // chart depends on your chart's name it could be anything like charrt112.flush()
                    });

Answer 1

您的问题似乎与boorstrap无关。检查此jsFiddle，您的确切代码可以正常显示返回后显示正确的列宽。

如果没有关于您正在使用的图表库的更多信息，我的猜测就像大多数图表库在首次渲染时获得它的大小。当div大小发生变化时，您必须根据图表库手动调用图表对象上的resize，redraw或referesh等内容。

如果您可以指出图表库，或者甚至更好地更新我的jsFiddle示例以显示您的图表，那么将更容易弄清楚如何使图表重新设置。

更新c3.js

重新显示div后，请尝试拨打chart.flush();并查看其是否正确调整大小。

$("#buttonFire").click(function(){
    $(".topTenWeb30d").css("display","none");
    $(".topTenWebCus").css("display","block");
    chart.flush(); // use reference to your chart object
});

如果chart.flush()不起作用，作为最后一个选项，您可以根据div维度动态设置图表的宽度和高度。

chart.resize({
  height: $(".topTenWebCus").innerHeight(),
  width: $(".topTenWebCus").innerWidth()
});

Answer 2

如果我理解正确的话，我认为你需要这个：

$(window).resize(function(){
   $("#buttonFire").trigger('click');
});