Highcharts：无需指定按钮即可打印图表答案

【问题标题】：Highcharts: print chart without designated buttonHighcharts：无需指定按钮即可打印图表
【发布时间】：2013-09-25 07:31:43
【问题描述】：

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

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

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

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

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

【问题讨论】：

看起来像一个错误，报告了here。谢谢！

标签： css highcharts highstock

【解决方案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>

工作原理：检测“打印前”事件，将图表调整为 670 像素（打印 A4 的可靠宽度），检测“打印后”事件并将图表调整为原始大小。

致谢：TJ VanToll 用于检测打印事件功能，this thread 上的人员用于高图表调整功能，this answer 用于建议 670 像素。

【讨论】：

【解决方案2】：

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

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

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

}

【讨论】：