时间戳

首页 > 解决方案 > Highcharts 通过按钮单击选择图表并调整宽度

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

问题描述

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

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

});

div 的宽度为 css 类的 100%。

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

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

标签： htmlbuttonhighcharts

解决方案

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

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

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

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

推荐阅读