Javascript jquery show（）未正确显示highcharts图形

因此，我试图在同一个div中显示3个图形，通过分别显示/隐藏其他div的按钮进行切换。我已将其他两个图形设置为

style= "display: none"

确保加载时仅显示一个图形。这是默认视图的外观：

默认视图是“每日”按钮。但是，当我单击其他两个按钮时，图形的宽度变大，显示如下

它因为某种原因而收缩。我已经切换了显示顺序，而隐藏的图形总是存在大小问题。我怀疑它与内联样式属性有关，但我不知道如何使它正确显示

图形的代码段：

<button onclick="showDay('tasks')">Day on Day</button>
<button onclick="showWeek('tasks')">Week on Week</button>
<button onclick="showMonth('tasks')">Month on Month</button>
<div class="portlet-body">
    <div id="tasks"></div>
    <div id="tasksWeek" style="display: none"></div>
    <div id="tasksMonth" style="display: none"></div>
</div>

<script>
new Highcharts.StockChart({{masterDic['tasks']|safe}});
new Highcharts.StockChart({{masterDic['tasksWeek']|safe}});
new Highcharts.StockChart({{masterDic['tasksMonth']|safe}});
</script>

日复一日
周而复始
逐月
新的Highcharts.StockChart（{{masterDic['tasks']| safe}}）；
新的高图表。股票图表（{{masterDic['tasksWeek']| safe}）；
新的高图表。股票图表（{{masterDic['tasksMonth']| safe}）；

用于调用的代码段（现在是hackish）

功能显示日（id）{
var idDay=“#”+id；
变量idWeek=“#”+id+“Week”；
变量idMonth=“#”+id+“月”；
$（idWeek）.hide（10）；
$（idMonth）.hide（10）；
$（idDay）.show（10）；
}
功能展示周（id）{
var idDay=“#”+id；
变量idWeek=“#”+id+“Week”；
变量idMonth=“#”+id+“月”；
$（idMonth）.hide（10）；
$（idDay）.hide（10）；
$（idWeek）.show（10）；
}
功能显示月份（id）{
var idDay=“#”+id；
变量idWeek=“#”+id+“Week”；
变量idMonth=“#”+id+“月”；
$（idDay）.hide（10）；
$（idWeek）.hide（10）；
$（idMonth）.show（10）；
}

有人知道如何解决这个问题吗？非常感谢！：）

编辑：

portlet主体的css（使用inspect元素时的整个跟踪）：

在show（）之后调用此

---

在show（）之后调用此函数。

如果有人感兴趣，请找出答案。Tldr:显示后在图表上调用reflow（）

根据@Grzegorz blachlinski的评论，我使用了hide（）和show（）而不是制表符，因此给出的解决方案不起作用

我找到了这个链接，它向您展示了如何访问HTML中的元素

我使用的是highcharts CDN，它显然不是3.0.1，所以jquery方法不起作用。因此，我创建了以下函数，并在每次show（）之后调用它

---

工作起来很有魅力：）

如果有人感兴趣，我会想出来的。Tldr:显示后在图表上调用reflow（）

根据@Grzegorz blachlinski的评论，我使用了hide（）和show（）而不是制表符，因此给出的解决方案不起作用

我找到了这个链接，它向您展示了如何访问HTML中的元素

我使用的是highcharts CDN，它显然不是3.0.1，所以jquery方法不起作用。因此，我创建了以下函数，并在每次show（）之后调用它

---

工作起来很有魅力：）

请提供

portlet主体的css和三个图表。嘿@Eddi，谢谢你的回复！我不能真正向您展示三个图表的css，因为我使用pandas highcharts库生成它们（因此没有css，除了带有深色unica主题的默认highcharts css），但我已经更新了portlet Body的css哦，我完全跳过了您使用画布绘制图表的部分，但这当然是有意义的。我可以想起一个类似的情况，图表也有类似的问题（使用另一个库）。当图表容器最初隐藏时（使用
显示：none
），出现了问题，然后创建了图表，过了一段时间，容器再次显示，但图表放错了位置。这是由于图表最初隐藏的容器，用于计算图表的高度/宽度和位置。也许这里也有类似的情况。啊，可能就是这样，我可以问一下，你是如何解决这个问题的？我们通过编程更改窗口大小（然后再次更改为原始大小）来解决这个问题，因为图表在该事件上有一个事件侦听器。在此事件中，图表将重新计算其高度/宽度和位置。我不知道HighchartJS，但我想有一些可能重新绘制图表。如果是，那么尝试在
show（）之后调用它。
请提供
portlet主体的css和三个图表。嘿@Eddi，谢谢你的回复！我不能真正向您展示三个图表的css，因为我使用pandas highcharts库生成它们（因此没有css，除了带有深色unica主题的默认highcharts css），但我已经更新了portlet Body的css哦，我完全跳过了您使用画布绘制图表的部分，但这当然是有意义的。我可以想起一个类似的情况，图表也有类似的问题（使用另一个库）。当图表容器最初隐藏时（使用
显示：none
），出现了问题，然后创建了图表，过了一段时间，容器再次显示，但图表放错了位置。这是由于图表最初隐藏的容器，用于计算图表的高度/宽度和位置。也许这里也有类似的情况。啊，可能就是这样，我可以问一下，你是如何解决这个问题的？我们通过编程更改窗口大小（然后再次更改为原始大小）来解决这个问题，因为图表在该事件上有一个事件侦听器。在此事件中，图表将重新计算其高度/宽度和位置。我不知道HighchartJS，但我想有一些可能重新绘制图表。如果是，请尝试在
show（）
嘿，谢谢你的回复！：）我调用了$（window.resize（）；在节目结束时（）但没有任何区别。我已经把代码片段放在我的答案中，以供参考，增加setTimeout时间，它应该会在绘制图表后触发Hello，它仍然不起作用。我做错了吗？C
<script>
    function showDay(id) {
        var idDay = "#"+id;
        var idWeek  = "#"+id+"Week";
        var idMonth = "#"+id + "Month";
        $(idWeek).hide(10);
        $(idMonth).hide(10);
        $(idDay).show(10);
    }
    function showWeek(id) {
        var idDay = "#"+id;
        var idWeek  = "#"+id+"Week";
        var idMonth = "#"+id + "Month";
        $(idMonth).hide(10);
        $(idDay).hide(10);
        $(idWeek).show(10);
    }
    function showMonth(id) {
        var idDay = "#"+id;
        var idWeek  = "#"+id+"Week";
        var idMonth = "#"+id + "Month";
        $(idDay).hide(10);
        $(idWeek).hide(10);
        $(idMonth).show(10);
    }
</script>

setTimeout(function(){
    $(window).resize();
})

// HACK TO GET IT TO DISPLAY PROPERLY
function callReflow(id){
    var index = $(id).data('highchartsChart');
    var chart = Highcharts.charts[index];
    chart.reflow();
}