打印网站时重新绘制/调整高度图 [英] Redraw/Resize highcharts when printing website
本文介绍了打印网站时重新绘制/调整高度图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我打印右下框架时，文本部分文本部分被高图覆盖，因为它们在打印之前不调整大小。是否有解决方案为网站配置
HTML
< script src =http://code.highcharts.com/ highcharts.js>< /脚本>
< script src =http://code.highcharts.com/modules/exporting.js>< / script>
< div id =containerstyle =height：400px>< / div>
< div id =containerstyle =height：400px>< / div>
JavaScript
$（function（）{
Highcharts.setOptions（{//适用于所有图表
图表：{
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：'}
}
}）;
$重新打印'
}，
字幕：{
text：'点击上下文菜单并选择打印图表。< br>设置图表大小'
}，
xAxis：{
categories：['Jan'，'Feb'，'Mar'，'Apr'，'May '，'Jun'，
'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec']
}，
系列： [{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
}]
}）;
}）;
解决方案
在CSS图表中使用触发器将触发图表和媒体查询的重排设置打印网站时的大小。
JS：
$（ function（）{
Highcharts.setOptions（{//适用于所有图表
图表：{
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：'点击上下文菜单，然后选择打印图表。< br>图表大小设置为600x400并在打印后恢复。'
}，
xAxis：{
categories ：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec']
}，
系列：[{
数据：[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;
保证金：0;
}
@media print {
html，body {
padding：0px;
margin：0px;
宽度：210mm;
身高：297mm;
}
#container {
float：left;
padding：0px;
margin：0px;
宽度：80％;
$ / code $ / pre
$ b HTML：
< script src =http://code.highcharts.com/highcharts.js>< / script>
< script src =http://code.highcharts.com/modules/exporting.js>< / script>
< div id =containerstyle =height：400px;>< / div>
JSFiddle： http://jsfiddle.net/w4ro5xb7/13/
全屏效果测试效果更佳： http://jsfiddle.net/w4ro5xb7/13/show/
When I'm printing the bottom right frame the text some text is partly covered by the highcharts because they don't resize before printing. Is there a solution to configure a printing layout with @media print for the website and force highcharts to redraw/resize to container size when website is printed?
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]
}]
});
});
解决方案 Using listener that will trigger reflow for a chart and media queries in CSS chart should be printed in set size when printing a website.
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/
Test in full screen result for better effect: http://jsfiddle.net/w4ro5xb7/13/show/
这篇关于打印网站时重新绘制/调整高度图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
