打印網站時重繪/調整高度圖

Question

當我打印右下框架時，文本some text部分被高圖覆蓋，因爲它們在打印前不調整大小。有沒有一種解決方案可以爲網站配置@media print的打印佈局，並在打印網站時強制highcharts重新繪製/調整容器大小？

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="height: 400px"></div> 
<div id="container" style="height: 400px"></div> 

的JavaScript

$(function() { 
    Highcharts.setOptions({ // Apply to all charts 
     chart: { 
      events: { 
       beforePrint: function() { 
        this.oldhasUserSize = this.hasUserSize; 
        this.resetParams = [this.chartWidth, this.chartHeight, false]; 
        this.setSize(600, 400, false); 
       }, 
       afterPrint: function() { 
        this.setSize.apply(this, this.resetParams); 
        this.hasUserSize = this.oldhasUserSize; 
       } 
      } 
     } 
    }); 

    $('#container').highcharts({ 

     title: { 
      text: 'Rescale to print' 
     }, 

     subtitle: { 
      text: 'Click the context menu and choose "Print chart".<br>The chart size is set to 600x400 and restored after print.' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 

    }); 

}); 

JSFiddle

Answer 1

使用監聽器將觸發一個圖表和媒體查詢的CSS圖表迴流應設置大小打印網頁時打印。

JS：

$(function() { 
    Highcharts.setOptions({ // Apply to all charts 
     chart: { 
      events: { 
       beforePrint: function() { 
        this.oldhasUserSize = this.hasUserSize; 
        this.resetParams = [this.chartWidth, this.chartHeight, false]; 
        this.setSize(600, 400, false); 
       }, 
       afterPrint: function() { 
        this.setSize.apply(this, this.resetParams); 
        this.hasUserSize = this.oldhasUserSize; 
       } 
      } 
     } 
    }); 

    $('#container').highcharts({ 
     title: { 
      text: 'Rescale to print' 
     }, 
     subtitle: { 
      text: 'Click the context menu and choose "Print chart".<br>The chart size is set to 600x400 and restored after print.' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 

    var printUpdate = function() { 
     $('#container').highcharts().reflow(); 
    }; 

    if (window.matchMedia) { 
     var mediaQueryList = window.matchMedia('print'); 
     mediaQueryList.addListener(function (mql) { 
      printUpdate(); 
     }); 
    } 
}); 

CSS：

@page { 
    size: A4; 
    margin: 0; 
} 
@media print { 
    html, body { 
     padding:0px; 
     margin:0px; 
     width: 210mm; 
     height: 297mm; 
    } 
    #container { 
     float:left; 
     padding: 0px; 
     margin: 0px; 
     width: 80%; 
    } 
} 

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="height: 400px;"></div> 

的jsfiddle：爲更好的效果全屏結果http://jsfiddle.net/w4ro5xb7/13/

測試：http://jsfiddle.net/w4ro5xb7/13/show/

Answer 2

這裏是不同的解決方案的混合，而不需要exporting.js的（添加導出按鈕，將所有的圖表頁...）

大小自動重新調整，打印後復位。

主要是測試在IE

window.onbeforeprint = function() { 
    $(Highcharts.charts).each(function(i,chart){ 
     chart.oldhasUserSize = chart.hasUserSize; 
     chart.resetParams = [chart.chartWidth, chart.chartHeight, false]; 

     var height = chart.renderTo.clientHeight; 
     var width = chart.renderTo.clientWidth; 
     chart.setSize(width, height); 
    }); 
} 
window.onafterprint = function() { 
    $(Highcharts.charts).each(function(i,chart){ 
     chart.setSize.apply(chart, chart.resetParams); 
     chart.hasUserSize = chart.oldhasUserSize; 
    }); 
}