javascript - 打印网站时重绘/调整图表大小

Question

当我打印右下角的框架时，文本 some text 部分被 highcharts 覆盖，因为它们在打印前不会调整大小。是否有一种解决方案可以使用 @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/