Highcharts 通过按钮单击选择图表并调整宽度答案

【问题标题】：Highcharts select chart by button click and adjust widthHighcharts 通过按钮单击选择图表并调整宽度
【发布时间】：2020-07-12 00:09:04
【问题描述】：

我已经构建了多个图表，并希望通过单击按钮来选择其中一个。每个按钮显示一个图表的 div 并隐藏其他图表：

$(document).ready(function(){
    $("#standd").click(function(){
        $("#Standd").show();
        $("#Verlaufw").hide();
        $("#Verlaufd").hide();
        $("#Standw").hide();

});

按 css 类，div 的宽度为 100%。

.width {
  min-width: 320px; 
  max-width: 100%; 
  margin: 0 auto;
   }

当我更改浏览器的大小时，实际图表会将宽度调整为新大小。但背景中的其他人保持原来的大小。当我单击一个按钮并显示另一个图表时，它的大小错误。我能做些什么？见fiddle

【问题讨论】：

标签： html button highcharts

【解决方案1】：

您可以调用reflow 方法来确保图表适合其容器：

$("#standd").click(function() {
  $("#Standd").show();
  $("#Standd").highcharts().reflow();
  ...
});

现场演示： https://jsfiddle.net/BlackLabel/vyusa02g/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

【讨论】：