高回报在回流之后不响应 [英] highcharts not responsive after reflow

问题描述

我正在设置一个专门的打印按钮。这个页面很复杂，在发送到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宽度，高度）; 
 chart.reflow（）; 
}）; 
  

解决方案

在@ Ryan的链接和评论的帮助下一位同事，我尝试了一些解决方案，虽然没有工作，但让我更加接近。

然后，当我更好地了解要寻找什么时，我终于找到了这个答案 Highcharts + Bootstrap .table-responsive问题提供了一个关键因素。

这两个键是：

1. 不要在SVG本身或直接的Highchart容器上设置大小。 （我将它设置在一个包含高一级的div上。）

触发一个$（窗口）.trigger（resize）;事件。

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

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

  //设置
 
 $（'。chart-container'）。css （'width'，'690px'）; 
 $（window）.trigger（resize）; 
 
 //拆解
 
 $（'。chart-container'）。css（'width'，''）; 
 $（window）.trigger（resize）; 
  

I am setting up a specialised Print button. The page is complicated and needs some pre-processing before being sent to window.print().

I have the Highcharts code working at this point. It correctly resizes the charts on the page, and then, post print, it sizes them back to their original size.

The problem is that from then on, the charts will not respond to Media Query changes. The site is Responsive, built on Bootstrap, so this is not a functional result.

How do I change the chart size, but leave it able to respond to Media Queries?

The code I am using is:

Setup Code

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();
});

Post Print Teardown Code

    $('.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();
    });

解决方案

With the help of @Ryan's link, and comments from a co-worker, I tried a number of solutions which, while not working, got me closer.

Having then a better idea of what to look for, I finally found this answer Highcharts + Bootstrap .table-responsive issue which provided a key ingredient.

The two keys are:

1. Do not set the size on either the SVG itself, or the direct Highchart's container. (I set it on a containing Div one level higher.)

2. Trigger a $(window).trigger("resize"); event.

This worked in all browsers tested (Firefox, Chrome, IE 9 - 11).

----------------- The Final Code -----------------------

// Setup

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

// Teardown

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

这篇关于高回报在回流之后不响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！