Javascript 删除“后调整c3.js图表的大小”；显示：无“；表格组

所以我有一个预加载元素的函数，并使用显示：无隐藏图表

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

之后，我得到了另一个onclick函数来删除“display:none”css

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

它很好用。但即使我在网站中插入了引导程序，它也不会重新调整大小

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

更新1:

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

我只想弄明白一件重要的事情，如果缩放率为100%，图表将正确显示，但如果用户更改缩放率，图表将不会调整到适当的大小

更新2 我尝试使用.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()
                    });

---

如果我正确理解您，我认为您需要：

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

---

你的问题似乎不在于陷阱。选中此项，您的确切代码可以在显示返回后显示正确的列宽

如果没有关于您正在使用的图表库的更多信息，我的猜测就像大多数图表库一样，您的图表库在第一次渲染时都会得到它的大小。当div大小更改时，您必须根据图表库在图表对象上手动调用诸如

resize

、

redraw

或

referesh

等操作

如果您可以指出您的图表库，或者更好地更新我的JSFIDLE示例以显示您的图表，那么您将更容易找到如何重新调整图表的方法

更新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()
});

---

抱歉，我犯了一个错误。使用jquery

hide（）

和

show（）

如何？在使用display:none隐藏元素之前，大小是否正确？尝试在显示div时绘制它，而不是在隐藏div时绘制它。简单的方法是点击按钮后重新绘制。您使用的是哪个图表库？我试过了，但看起来不会刷新。只要我将我的图表声明为chart8，我甚至会执行chart8.flush（），但运气不好。不确定您在这里的意思，您可能需要在问题中发布图表代码。如果您可以使用图表代码更新JSFIDLE，这将有所帮助。另外，请尝试我刚才在回答中更新的

调整大小

选项。或者您在控制台上遇到无法访问图表对象的错误？很抱歉，再次尝试，刷新方法实际上正在工作！我应该为社区更新我的答案，很高兴它奏效了！您不需要更新问题中的答案。这实际上违反了stackoverflow约定。一个公认的答案足以告诉人们什么对你有用。

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