Question

我在网页上使用Highcharts （v3.0.10）一周，并且在打印页面时无法重新绘制我的图表。问题是我在图表中使用深色背景颜色，但在打印时，我想将其更改为白色。为了实现这一点，我需要在更改redraw()属性后backgroundColor我的图表。问题是，当我这样做时，背景颜色在打印预览上发生变化，但数据消失，由于某种原因，它不会重新绘制。

在尝试更改背景颜色之前，我一直在使用容器div大小进行一些改造，并调用reflow()以使图表调整为A4页面，并且它完美地运行在预览打印页面时：容器的大小与我想要的大小相同，并且图表会成功地重新回到新的大小。

当我希望背景变为白色并在用户尝试打印页面时触发的回调中添加redraw()方法时，问题就开始了。容器仍然reflow()正确且背景更改为白色，但图表中缺少数据。

我创建了一个示例小提琴，您可以review here。它适用于Chrome和Firefox（我的意思是你可以重现这个问题）。为了预览我提供的这个小提琴，只需尝试使用浏览器打印小提琴页面，这样就会出现页面打印预览窗口。

为Firefox打印页面预览和数据消失on this link添加了一些屏幕截图。

另请注意我正在使用的Highcharts版本：3.0.10。它不是最新版本，但是我拥有的当前许可证无法获得更高版本。

一些代码和内容

用户尝试打印时执行的打印处理程序和代码：

/** Chrome **/
        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    resize();
                } else {
                        unresize();
                }
            });
        }
    // Firefox
  if (window.onbeforeprint !== undefined && window.onafterprint !== undefined) {
            window.onbeforeprint = function() {
                resize();
            }
            window.onafterprint = function() {
                unresize();
            }
        }

  var originalBackground = '#333';
  function resize(){
      // Do some transformations to fit an A4 page that 
      //are not the matter of this question
      // ......
      //......
      // Loop through all containers (only two but anyways...)
      // and apply changes
      $('.graph-container').each(function(i,e){
        let chart = $(e).highcharts();
        chart.options.chart.backgroundColor = '#FFFFFF';
        // Create new chart with background color
        $(e).highcharts(chart.options);
        // Force redraw 
        $(e).highcharts().redraw();
    });
  }      
  function unresize(){
    $('.graph-container').each(function(i,e){
            let chart = $(e).highcharts();
      // Revert background to original color #333
      chart.options.chart.backgroundColor = originalBackground;
      $(e).highcharts(chart.options);
      $(e).highcharts().redraw();
    });
  }

Highcharts重绘不重绘数据

0 个答案: