Question

我正在设置一个专门的打印按钮。页面很复杂，需要一些预处理才能发送到window.print（）。

我现在有Highcharts代码。它正确调整页面上的图表大小，然后在打印后，将它们调整为原始大小。

问题是，从那时起，图表将不会响应Media Query更改。该站点是响应式的，基于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();
    });

Answer 1

在@ Ryan的链接以及同事的评论的帮助下，我尝试了一些解决方案，这些解决方案虽然不起作用，但让我更接近。

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

这两个键是：

不要在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");

Answer 2

设置尺寸后执行此操作即可。

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

然而，如果您将onresize函数更改为其他内容，则可能无效。所以这更像是一个快速的解决方案，但它完美地运作

highcharts在回流后没有响应

2 个答案: