回流后highcharts没有响应答案

【问题标题】：highcharts not responsive after reflow回流后highcharts没有响应
【发布时间】：2016-01-29 18:51:19
【问题描述】：

我正在设置一个专门的打印按钮。该页面很复杂，需要在发送到 window.print() 之前进行一些预处理。

此时我的 Highcharts 代码正在运行。它会正确调整页面上图表的大小，然后在打印后将其调整回原来的大小。

问题是从那时起，图表将不再响应媒体查询的变化。该网站是响应式的，建立在 Bootstrap 之上，因此这不是功能性结果。

如何更改图表大小，但使其能够响应媒体查询？

我使用的代码是：

设置代码

var saveChartContainerWidth = $('.highcharts-container').css('width');
var saveChartContainerWidthSVG = saveChartContainerWidth.slice(0, -2);

$('.highcharts-container').css('width', '690px');
$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = 690; // chart.renderTo.clientWidth; 
    chart.setSize(width, height);
    chart.reflow();
});

打印后拆解代码

    $('.highcharts-container').css('width', saveChartContainerWidth);
    $(Highcharts.charts).each(function(i,chart){
        var height = chart.renderTo.clientHeight; 
        var width = saveChartContainerWidthSVG;
        chart.setSize(width, height);
        chart.reflow();
    });

【问题讨论】：

我认为问题在于您给图表提供了固定大小而不是最大大小，因此响应性被删除了
我该怎么做？除非我给它一个特定的宽度值，否则我在 IE 中让它调整图表大小时遇到了一些问题。其他浏览器似乎只需调整容器大小即可正常工作。
试试这样的：stackoverflow.com/questions/17359805/…
不幸的是，我不知道这是否有效或如何在 IE 上实现...
您是否尝试过类似：jsfiddle.net/w4ro5xb7/54？

标签： javascript jquery twitter-bootstrap highcharts

【解决方案1】：

在@Ryan 的链接和同事的 cmets 的帮助下，我尝试了一些解决方案，虽然没有奏效，但让我更接近了。

在对要查找的内容有了更好的了解后，我终于找到了这个答案Highcharts + Bootstrap .table-responsive issue，它提供了一个关键要素。

这两个键是：

不要在 SVG 本身或直接 Highchart 的容器上设置大小。（我将它设置在更高一级的包含 Div 上。）
触发 $(window).trigger("resize");事件。

这适用于所有经过测试的浏览器（Firefox、Chrome、IE 9 - 11）。

----------------- 最终代码 -----------------------

// Setup

$('.chart-container').css('width', '690px');
$(window).trigger("resize");

// Teardown

$('.chart-container').css('width', '');
$(window).trigger("resize");

【讨论】：

【解决方案2】：

在设置大小后执行此操作即可。

   window.onresize = () => {
     chart.setSize($('parentElement').offsetWidth, height)
     chart.reflow()
   }

但是，如果您将 onresize 函数更改为其他函数，它可能无法正常工作。所以这更像是一个快速的解决方案，但效果很好

【讨论】：