Question

我正在开发一个使用openResiazbleWindow（）打开一个显示谷歌图表的窗口的应用程序。窗口的大小已设置，我不想更改它，因为大小已经看起来很好。但我有一个问题，当它打印出来时，它只占用了四分之一的页面。我试图将它打印出全屏，但是当我尝试将CSS添加到div时，这没有帮助。我最接近解决方案是在onresize事件中添加一个函数，我在其中重绘图表。但是，似乎浏览器不会将打印计为调整大小。我有什么想法可以做到这一点？以下相关代码。

function dataLabelsDisplay(bool,chart){
    for (var i = 0; i<chart.series.length; i++){
        if (bool)
            chart.series[i].dataLabelsGroup.show();
        else 
            chart.series[i].dataLabelsGroup.hide();
    }
}


function stackedLabelsDisplay(bool,chart){
    if (bool)
        chart.axes[1].stackTotalGroup.show();
    else 
        chart.axes[1].stackTotalGroup.hide();
}

有什么想法吗？

Answer 1

绘制图表两次。一旦你做了，一次在一个隐藏的div中，后面的大小更大。使用@media print指令隐藏视觉div并显示打印div。

伪似的这样的东西，我只在非打印div上设置宽度/高度来显示：

<html>
<head>
    <style>
        .print {display:none;}
        @media print {
        .noprint {display:none;}
        .print {display:block;}
        }
    </style>
</head>
<body>
    <div class="noprint" style="width:480px;height:350px;background-color:yellow;">
        <p>I am a smaller div that does not print</p>
    </div>
    <div class="print" style="width:960px;height:700px;background-color:red;">
        <p>I am a large div that does print</p>
    </div>
</body>
</html>

打印Google Chart以占据整页

1 个答案: