總覽
Google 圖表可以直接在瀏覽器中列印,或透過 print()
函式從 JavaScript 列印。如要提供圖表 PNG 圖片的存取權,您可以使用 getImageURI()
方法。這項功能目前適用於核心圖表和地理圖。
如果您的圖表 (類型為 ChartType,例如 ColumnChart 或 PieChart) 稱為 my_chart,且顯示它的 div 是 my_div,以下是存取圖表做為 PNG 的方式:
var my_div = document.getElementById('chart_div'); var my_chart = new google.visualization.ChartType(chart_div); google.visualization.events.addListener(my_chart, 'ready', function () { my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">'; }); my_chart.draw(data);
注意:建議您等待 ready
事件 (如本頁的範例所示),以確保圖表已完成算繪。
注意: 這項指令僅適用於支援 HTML5 <canvas>
元素的瀏覽器,因此不適用於 Internet Explorer 9 以下版本。
以下提供完整範例:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333', ], ['Silver', 10.49, 'silver'], ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ] ]); var options = { title: "Density of Precious Metals, in g/cm^3", bar: {groupWidth: '95%'}, legend: 'none', }; var chart_div = document.getElementById('chart_div'); var chart = new google.visualization.ColumnChart(chart_div); // Wait for the chart to finish drawing before calling the getImageURI() method. google.visualization.events.addListener(chart, 'ready', function () { chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; console.log(chart_div.innerHTML); }); chart.draw(data, options); } </script> <div id='chart_div'></div>
當這個程式執行時,chart_div.innerHTML
會設為圖表的 PNG 編碼,並在 JavaScript 控制台中顯示:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
將這個 URI 直接放在瀏覽器網址列時,新版瀏覽器會算繪圖片:
![](https://developers.google.cn/static/chart/interactive/images/chart_printable.png?authuser=6&hl=zh-tw)
您可以在下列 JavaScript 程式碼中加入可列印版本的連結:
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
然後在 HTML 中加上這一行:
<div id='png'></div>
快照選取項目
圖表建立者可以在使用者瀏覽器中,透過程式輔助方式對圖表執行大部分的操作。因此,如果您想在特定時間點建立顯示工具提示,或使用交叉線建立圖表的靜態圖片,可以在 getImageURI()
之前呼叫 setSelection()
,如下所示。
以下的散佈圖包含 100 個隨機點,其中一個有工具提示和十字線:
重新載入後,即可看到所選的其他端點。程式碼,主要以粗體顯示:
<script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); for (var i = 0; i < 100; i++) data.addRow([Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)]); var options = { legend: 'none', crosshair: { trigger: 'both' }, // Display crosshairs. tooltip: { trigger: 'selection' } // Display tooltips on selection. }; var chart = new google.visualization.ScatterChart(document.getElementById('scatter_setselection')); google.visualization.events.addListener(chart, 'ready', function () { chart.setSelection([{row:99, column:1}]); // Select one of the points. png = '<a href="' + chart.getImageURI() + '">Printable version</a>'; console.log(png); }); chart.draw(data, options); }