Penting: Bagian Diagram Gambar dari Alat Google Chart secara resmi tidak digunakan lagi sejak 20 April 2012. Fitur ini akan terus berfungsi sesuai dengan kebijakan penghentian penggunaan kami.
Ringkasan
Diagram Gambar Generik adalah wrapper umum untuk semua diagram yang dihasilkan oleh Google Chart API. Baca dokumentasi Chart API sebelum mencoba menggunakan visualisasi ini. Perhatikan bahwa Anda dapat mengirim hingga 16 ribu data menggunakan visualisasi ini, tidak seperti batas 2 ribu untuk panggilan langsung ke Chart API.
Semua data diteruskan ke diagram menggunakan DataTable atau DataView. Selain itu, beberapa label diteruskan sebagai kolom dalam tabel data.
Semua parameter URL Chart API lainnya (kecuali untuk chd) diteruskan sebagai
opsi.
Oleh: Google
Contoh
Berikut adalah contoh dari beberapa jenis diagram.
Diagram Garis
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Diagram Batang Vertikal
Perhatikan bahwa dalam diagram batang yang digabungkan, Anda tidak perlu menentukan chxt='x' seperti yang Anda lakukan jika memanggil diagram sendiri; jika Anda tidak menentukan sumbu, Diagram Gambar Umum akan mencoba menyiapkan diagram dengan benar secara default.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Diagram Lingkaran
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Diagram Radar
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Diagram Peta
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Memuat
Nama paket google.charts.load adalah 'imagechart'
google.charts.load('current', {'packages': ['imagechart']});
Nama class visualisasi adalah google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Format Data
Ada dua format data umum: satu untuk diagram peta dan satu untuk semua diagram lainnya. Perhatikan bahwa satu-satunya format numerik yang didukung untuk data adalah jenis Nomor JavaScript.
Catatan Anda tidak boleh mengenkode nilai string apa pun ke URL sebagai data atau opsi.
Diagram Peta
Diagram peta mengambil tabel data yang berisi dua kolom:
- Kolom pertama - [string] Kode negara atau negara bagian/provinsi.
- Kolom kedua - [angka] Nilai untuk negara atau negara bagian tersebut.
Lihat dokumentasi diagram peta untuk informasi selengkapnya.
Diagram Non-Peta
Diagram non-peta mengambil tabel data dengan dua kolom opsional (satu di awal, satu di akhir), dan satu atau beberapa kolom data di antaranya:
- Kolom pertama - [opsional, string] Setiap entri mewakili label yang digunakan pada sumbu X (setara dengan parameter
chlatauchxl) untuk diagram yang mendukungnya. - Kolom berikutnya - Sejumlah kolom numerik, masing-masing mewakili deret data.
- Kolom terakhir - [opsional, string] Berapa pun jumlah kolom string setelah kolom data, dengan setiap entri merepresentasikan label titik data untuk diagram yang mendukungnya. Jika ingin menggunakan kolom ini,
Anda harus menentukan opsi
annotationColumns.
Data akan ditampilkan dengan cara yang berbeda, bergantung pada jenis diagram. Lihat dokumentasi untuk diagram Anda.
Catatan tentang indeks kolom: Visualisasi Diagram Gambar Generik menghapus kolom string dari tabel data sebelum mengirim tabel ke layanan Chart API. Oleh karena itu, indeks kolom dalam opsi, metode, dan peristiwa yang ditentukan pada halaman ini menyertakan kolom string dalam jumlah indeks; tetapi indeks kolom dalam opsi apa pun yang ditangani oleh layanan Chart API (misalnya opsi chm) mengabaikan kolom string dalam jumlah indeks.
Opsi Konfigurasi
Opsi berikut ditetapkan untuk visualisasi ini. Tentukan parameter tersebut dalam objek opsi yang diteruskan ke metode draw() visualisasi.
Tidak semua opsi berikut didukung untuk semua jenis diagram; baca dokumentasi untuk jenis diagram gambar statis Anda. Anda dapat meneruskan parameter URL Chart API apa pun sebagai opsi. Misalnya, parameter URL chg=50,50 dari visualisasi Diagram akan ditentukan dengan cara ini: options['chg'] = '50,50'.
Catatan tentang warna: Opsi warna seperti colors, color, dan backgroundColor ditentukan dalam format warna Chart API.
Format ini mirip dengan format #RRGGBB, kecuali bahwa format ini menyertakan angka heksadesimal keempat
opsional untuk menunjukkan transparansi. Warna yang dapat dibaca manusia,
seperti 'merah', 'hijau', 'biru', dll. tidak didukung. Format warna Chart API tidak menyertakan simbol # di awal, tetapi opsi visualisasi diagram gambar generik akan menerima kode warna dengan atau tanpa #.
| Name | Jenis | Default | Deskripsi |
|---|---|---|---|
| annotationColumns | Array<object> | tidak ada | Label titik data untuk berbagai jenis diagram. Elemen ini adalah array objek, yang masing-masing menetapkan label berformat ke satu titik data pada diagram. Opsi ini hanya tersedia untuk diagram yang mendukung titik data (lihat topik yang ditautkan untuk mempelajari yang mana), dan tabel data harus memiliki minimal salah satu kolom label string. Setiap objek dalam array memiliki properti berikut:
Contoh - Cuplikan ini mendefinisikan label teks hitam berukuran 12 piksel, dengan teks yang diambil dari kolom 0, dan ditetapkan ke titik data di kolom 2 pada baris yang sama: |
| backgroundColor | string | '#FFFFFF' (putih) | Warna latar belakang untuk diagram dalam format warna Chart API. |
| warna | string | Otomatis | Menentukan warna dasar yang akan digunakan untuk semua deret; setiap deret akan berupa gradasi dari warna yang ditentukan. Warna ditentukan dalam format warna Chart API.
Diabaikan jika colors ditentukan. |
| warna | Array<string> | Otomatis | Gunakan ini untuk menetapkan warna tertentu pada setiap deret data. Warna ditentukan dalam format warna Chart API.
Warna i digunakan untuk kolom data i, yang membungkus ke awal
jika ada lebih banyak kolom data daripada warna. Jika variasi satu warna dapat diterima untuk semua rangkaian, gunakan opsi color sebagai gantinya. |
| enableEvents | boolean | false | Menyebabkan diagram menampilkan peristiwa yang dipicu pengguna seperti klik atau kursor. Hanya didukung untuk jenis diagram tertentu. Lihat Peristiwa di bawah. |
| fill | boolean | false | Jika true (benar), akan mengisi area di bawah setiap baris. Hanya tersedia untuk diagram garis. |
| firstHiddenColumn | number | tidak ada | Indeks kolom data. Kolom yang tercantum, serta semua kolom berikut, tidak akan digunakan untuk menggambar elemen rangkaian diagram utama (seperti garis pada diagram garis, atau batang pada diagram batang), tetapi digunakan sebagai data untuk penanda dan anotasi lainnya. Perhatikan bahwa kolom string disertakan dalam jumlah indeks ini. |
| tinggi | number | 200 | Tinggi diagram, dalam piksel. Jika tidak ada atau tidak dalam rentang yang dapat diterima, tinggi elemen penampung akan digunakan. Jika itu juga berada di luar rentang yang dapat diterima, tinggi default akan digunakan. |
| label | string | 'tidak ada' | [Khusus diagram lingkaran] Label, jika ada, yang akan ditampilkan untuk setiap irisan. Pilih dari nilai berikut:
|
| legenda | string | 'kanan' | Tempat menampilkan legenda diagram, relatif terhadap diagram. Tentukan salah satu dari nilai berikut: 'top', 'bottom', 'left', 'right', 'none'. Diabaikan dalam diagram yang tidak menyertakan legenda (seperti diagram peta). |
| max | number | Nilai data maksimum | Nilai maksimum yang ditampilkan pada timbangan. Diabaikan untuk diagram lingkaran. Nilai defaultnya adalah nilai data maksimum, kecuali untuk diagram batang, dengan nilai defaultnya adalah nilai data maksimum. Nilai ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data. |
| mnt | number | Nilai data Mimimum | Nilai minimum yang ditampilkan pada timbangan. Diabaikan untuk diagram lingkaran. Nilai defaultnya adalah nilai data minimum, kecuali untuk diagram batang, dengan nilai defaultnya adalah nol. Nilai ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data. |
| showCategoryLabels | boolean | true | Apakah label harus muncul pada sumbu kategori (yaitu baris). Hanya tersedia untuk diagram garis dan batang. |
| showValueLabels | boolean | true | True menampilkan label pada sumbu nilai. Hanya tersedia untuk diagram garis dan batang. |
| singleColumnDisplay | number | tidak ada | Hanya merender kolom data yang ditentukan. Angka ini adalah indeks berbasis nol ke dalam tabel, dengan nol adalah kolom data pertama. Warna yang ditetapkan untuk satu kolom sama seperti saat semua kolom dirender. Tidak dapat digunakan dengan diagram lingkaran atau peta. |
| title | string | String kosong | Judul diagram. Jika tidak ditentukan, judul tidak akan ditampilkan. Parameter diagram yang setara adalah chtt. |
| valueLabelsInterval | number | Otomatis | Interval yang menampilkan label sumbu nilai. Misalnya, jika min
adalah 0, max adalah 100, dan valueLabelsInterval
adalah 20, diagram akan menampilkan label sumbu di (0, 20, 40, 60, 80, 100). |
| lebar | number | 400 | Lebar diagram, dalam piksel. Jika tidak ada atau tidak dalam rentang yang dapat diterima, lebar elemen penampung akan digunakan. Jika itu juga berada di luar rentang yang dapat diterima, lebar default akan digunakan. |
Metode
| Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
|---|---|---|
draw(data, options) |
Tidak ada | Menggambar peta. |
getImageUrl() |
String | Menampilkan URL Google Chart API yang digunakan untuk meminta diagram. Perhatikan bahwa panjangnya dapat lebih dari 2.000 karakter. Lihat Google Chart API untuk detail selengkapnya. |
Acara
Jika Anda menetapkan properti enableEvents ke benar (true), diagram pendukung akan menampilkan peristiwa untuk peristiwa pengguna yang tercantum dalam tabel di bawah. Semua peristiwa ini
menampilkan objek event dengan properti berikut:
type- String yang mewakili jenis peristiwa.region- ID untuk wilayah yang terpengaruh. Tambahkan parameterchof=jsonke jenis diagram mentah untuk melihat daftar nama yang tersedia. Lihatchof=jsonuntuk detail selengkapnya.
| Name | Deskripsi | type Value |
|---|---|---|
error |
Diaktifkan saat terjadi error saat mencoba merender diagram. | id, pesan |
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke elemen diagram. | "arahkan mouse" |
onmouseout |
Diaktifkan saat pengguna mengarahkan mouse dari elemen diagram. | "mouseout" |
onclick |
Diaktifkan saat pengguna mengklik elemen diagram. | "klik" |
Diagram mana yang mendukung peristiwa?
Semua diagram yang mendukung parameter chof=json
mendukung peristiwa pelemparan (yaitu, semua diagram kecuali diagram khusus, misalnya
kode QR).
Contoh Penanganan Peristiwa
Berikut adalah contoh yang menunjukkan batang yang merekam klik mouse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Kebijakan Data
Data dikirim ke layanan Google Chart API.
Pelokalan
Visualisasi ini mendukung pelokalan apa pun yang didukung oleh layanan Google Chart.