可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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] }] }); });
JSFiddle
回答1:
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/
回答2:
Here is a mix of different solutions, with no need of exporting.js (which adds exporting button to all graphs on page...)
The size is automatically rescaled, then reset after print.
Tested mostly on 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; }); }
UPDATE: I now use a different version, fixing the size of each chart instead of using clientWidth. It works on the 3 browsers I tested (IE 11, FF & Chrome)
function redimChartBeforePrint(chart, width, height) { if (typeof(width) == 'undefined') width = 950; if (typeof(height) == 'undefined') height = 400; chart.oldhasUserSize = chart.hasUserSize; chart.resetParams = [chart.chartWidth, chart.chartHeight, false]; chart.setSize(width, height, false); } function redimChartAfterPrint(chart) { chart.setSize.apply(chart, chart.resetParams); chart.hasUserSize = chart.oldhasUserSize; } window.onbeforeprint = function() { redimChartBeforePrint($('#chart1').highcharts()); redimChartBeforePrint($('#chart2').highcharts(), 800, 600); ... }; window.onafterprint = function() { redimChartAfterPrint($('#chart1').highcharts()); redimChartAfterPrint($('#chart2').highcharts()); ... };
