Print Google Chart to take Full Page

我正在研究一個使用openResiazbleWindow（）打開顯示谷歌圖表的窗口的應用程序。窗口大小已設置，我寧願不改變它，因爲尺寸已經很好看了。但是，當它打印出來時，我遇到了一個問題，它只佔用頁面的四分之一。我試圖把它全屏打印出來，但是當我嘗試將CSS添加到div時，這並沒有幫助。最接近我的解決方案是添加一個函數onresize事件，在那裏我重繪圖表。但是，似乎瀏覽器不會將打印計數爲調整大小。任何想法我可以做到這一點？下面的相關代碼。Print Google Chart to take Full Page

<style> 
.bottn { 
overflow: hidden; 
margin-left: 10px; } 
@media print { 
@page {size: landscape;} 
.bottn{ 
    visibility: hidden; 
} 
rect 
{ 
width: 100% !important; 
height: 100% !important; 
} 
} 
</style> 
.... 
<script>google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(drawTempChart); 
function drawTempChart() { 
var DATA = google.visualization.arrayToDataTable([ 
    ...... 
], false); 
var data = DATA; 
var options = { 
width:"100%", 
height:"100%", 
title: 'Harsh Acceleration Report', 
hAxis: { 
title: 'Vehicles', 
    }, 
vAxis: { 
    title: 'Harsh Acceleration Events' 
} 
}; 
var chart = new google.visualization.ColumnChart(document.getElementById('graph')); 
chart.draw(data, options); 
} 
window.onresize = function(event) { 
drawTempChart(); 
} 
</script> 
.... 
<body> 
    <a class='bottn' href='javascript:window.print();'>Print</a><div id="graph" style="width: 100%; height: 100%";></div> 
</body>

任何想法？

來源

2015-08-18 user2850818

繪製圖表兩次。一旦你完成了，一次隱藏在一個更大尺寸的div中。使用@media打印指令來隱藏可視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>

來源

2015-08-18 17:03:19

但我要補充什麼類型的CSS，使其頁面的適當大小。我無法使用100％，因爲圖表只會與最初打開的小窗口相同。我想我可以給它一個很大的尺寸，但是如果我超調它呢？ – user2850818

打印輸出中的一般規則應該是96px/in，這樣您可以考慮邊距和以上我看到您想要的風景我認爲 - div style =「width：960px; height：700px;」應該接近。 –

是的，這解決了它。謝謝您的幫助！ – user2850818

Print Google Chart to take Full Page

回答

相關問題