javascript - 根据容器更改而不是窗口调整大小调整 highchart

Question

这是一个代码笔，用于说明我将放置在这里的代码:https://codepen.io/andrewsunglaekim/pen/MmmxvO

不要介意糟糕的html，我只是复制了一个简单的 Highcharts 演示。

Html 很简单:

<div class="flexContainer">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <div class='flexToggle'>Flex it</div>
</div>

嵌套在 flex 容器中的简单图表。

CSS:

.flexContainer {
  display: flex;

}

#container {
  transition: flex 0.5s ease;
  flex: 3;
  background: red;
}

.flexToggle {
  transition: flex 0.5s ease;
  flex: 1;
  background: green;
}

#container.flexed {
  flex: 1;
}

.flexToggle.flexed {
  flex: 3;
}

这是切换 flexed 类的简单 jQuery 脚本:

$(".flexToggle").on("click", function(){
  $("#container").toggleClass("flexed")   
  $(".flexToggle").toggleClass("flexed")
})

我希望图表随过渡的 flex 元素动态调整大小。我所看到的一切都是关于利用窗口调整大小的工作，但在这种情况下我没有遇到过这样的事件。编写一个 setInterval 以在过渡期间重绘似乎很老套。是否有我缺少的配置部分使这变得非常简单？

Answer 1

经过一些研究，您可以通过简单地添加来修复水平缩放

.highcharts-container, .highcharts-container svg {
  width: 100% !important;
}

CSS