Question

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

不要介意可怕的HTML，我只是复制了一个简单的高级图表演示。

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元素动态调整大小。我所看到的一切都是利用Windows调整大小的工作，但在这种情况下我没有这样的事件。在转换过程中编写setInterval来重绘它看起来很糟糕。我是否缺少一个配置件，这使得这很简单？

Answer 1

经过一些研究，您只需添加

即可修复水平缩放

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

到CSS

Answer 2

你没有遗漏任何东西。使用JavaScript无法通过内置方式检测大小/位置变化。

普遍接受的做法是每隔一段时间检查元素的大小/位置。

事实上，所有AngularJS都以这种方式运行，有一个主要的间隔可以不断检查事物，并在值发生变化时更新视图。

根据容器更改NOT窗口调整大小调整高亮度图

2 个答案: