highcharts在回流后没有响应
我正在设置一个专门的打印按钮。 页面很复杂，需要一些预处理才能发送到window.print（）。
我现在有Highcharts代码。 它正确调整页面上的图表大小，然后，在打印后，它将它们调整为原始大小。
问题是，从那时起，图表将不会响应Media Query更改。 该站点是响应式的，基于Bootstrap构建，因此这不是function结果。
如何更改图表大小，但让它能够响应媒体查询？
我使用的代码是：
设置代码
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(); });
在@ Ryan的链接以及同事的评论的帮助下，我尝试了许多解决方案，虽然不起作用，但让我更接近。
然后我更好地了解了要寻找什么，我终于找到了这个答案Highcharts + Bootstrap .table-responsive问题 ，它提供了一个关键因素。
这两个键是：
-
不要在SVG本身或直接Highchart的容器上设置大小。 （我把它设置在一个更高的Div级别上。）
-
触发$（窗口）.trigger（“resize”）; 事件。
这适用于所有经过测试的浏览器（Firefox，Chrome，IE 9 – 11）。
—————–最终守则———————–
// Setup $('.chart-container').css('width', '690px'); $(window).trigger("resize"); // Teardown $('.chart-container').css('width', ''); $(window).trigger("resize");
设置尺寸后执行此操作即可。
window.onresize = () => { chart.setSize($('parentElement').offsetWidth, height) chart.reflow() }
但是，如果将onresize函数更改为其他内容，则可能无效。 所以这更像是一个快速的解决方案，但它完美无缺