Ringkasan
Google Chart dapat dicetak langsung dari browser atau dari JavaScript melalui fungsi print()
. Jika ingin
memberikan akses ke gambar PNG diagram, Anda dapat menggunakan
metode getImageURI()
. Ini saat ini berfungsi untuk diagram inti dan diagram geografis.
Jika diagram Anda (dengan jenis ChartType, seperti ColumnChart atau PieChart) disebut my_chart dan div yang menampilkannya adalah my_div, berikut adalah cara mengakses diagram sebagai 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);
Catatan: Anda harus menunggu
peristiwa ready
, seperti yang ditunjukkan pada contoh di halaman ini,
untuk memastikan bahwa diagram telah selesai dirender.
Catatan: Ini hanya akan berfungsi di browser yang
mendukung elemen <canvas>
HTML5, sehingga tidak akan
berfungsi di Internet Explorer 9 atau yang lebih lama.
Berikut contoh lengkapnya:
<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>
Saat program ini berjalan, chart_div.innerHTML
akan ditetapkan ke encoding PNG ini pada diagram dan ditampilkan di konsol JavaScript:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
Saat URI tersebut ditempatkan langsung ke kolom URL browser, browser modern akan merender gambar:
Anda dapat menyertakan link ke versi yang dapat dicetak dengan baris JavaScript berikut:
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
diikuti dengan baris ini di HTML Anda:
<div id='png'></div>
Snapshoting Pilihan
Sebagai pembuat diagram, Anda dapat melakukan hampir semua hal pada diagram secara terprogram yang dapat dilakukan pengguna di browser mereka. Jadi, jika Anda ingin
membuat gambar statis diagram dengan
tooltip
yang ditampilkan atau dengan
garis bidik pada
titik tertentu, Anda dapat melakukannya dengan memanggil setSelection()
sebelum
getImageURI()
, seperti yang ditunjukkan di bawah ini.
Berikut adalah diagram sebar dengan 100 titik acak, salah satunya dengan tooltip dan garis bidik yang telah dipilih sebelumnya:
Muat ulang dan Anda akan melihat titik yang berbeda dipilih. Kode, dengan baris kunci dicetak tebal:
<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); }