Highcharts：没有指定按钮的打印图表

Question

我希望用户能够使用标准浏览器的打印功能打印带有高图控件的整页。但控制正在被切断。 我将控件包裹在.chart-wrapper div中并尝试设置固定宽度以进行打印：

@media print {
    .chart-wrapper{
        width: 1000px;
    }
}
.chart-wrapper{
    width: 100%;
}

但它不起作用，打印页面如下所示：

如果我将.chart-wrapper宽度设置为@media print之外的1000px块图表在页面和打印页面上的宽度都是1000px，但我需要图表来获取所有非打印页面的宽度。< / p>

那么如何在非打印页面上以100％宽度显示图表并在打印页面上显示1000px？

Answer 1

这对我有用。

<script>
(function() {

    var beforePrint = function() {
        chart = jQuery('#graphArea').highcharts();
        chartWidth = chart.chartWidth;
        chartHeight = chart.chartHeight;
        chart.setSize(670,chartHeight, false);                  
    };

    var afterPrint = function() {
        chart.setSize(chartWidth,chartHeight, false);
        chart.hasUserSize = null;    // This makes chart responsive
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

</script>

工作原理：打印前检测＆＃39;事件，调整图表大小为670px（可靠的宽度打印A4），检测＆＃39;打印后＆＃39;事件并将图表调整为原始大小。

积分转到：TJ VanToll用于检测打印事件功能，this thread上的人员用于调整大小调整功能，this answer用于建议670px。

Answer 2

您是否尝试在@media屏幕css块中设置屏幕宽度？

@media print {
    .chart-wrapper{
        width: 1000px;
    }
}

@media screen {
    .chart-wrapper{
         width: 100%;
    }

}