Penting: Bagian Diagram Gambar di Google Chart Tools tidak lagi digunakan secara resmi secara resmi sejak tanggal 20 April 2012. Fitur ini akan terus berfungsi sesuai dengan kebijakan penghentian penggunaan kami.
Ringkasan
Diagram area yang dirender sebagai gambar menggunakan Google Chart API.
Contoh
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imageareachart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Memuat
Nama paket google.charts.load
adalah "imageareachart"
google.charts.load('current', {packages: ['imageareachart']});
Nama class visualisasinya adalah google.visualization.ImageAreaChart
var visualization = new google.visualization.ImageAreaChart(container);
Format Data
Setiap kolom mewakili garis dalam diagram; setiap entri adalah nilai sumbu Y pada titik sumbu X yang sama, dan visualisasi menghubungkannya dengan garis lurus, lalu mengisi area di bawah garis.
Data diproses berdasarkan kolom, mulai dari kolom nol hingga meningkat. Anda harus menulis baris tertinggi terlebih dahulu, kemudian baris yang lebih rendah, karena jika Anda menggambar garis yang lebih rendah terlebih dahulu, baris yang lebih tinggi akan menggambar dan menyembunyikan baris yang lebih rendah. Oleh karena itu, coba buat kolom 1 memiliki titik yang lebih tinggi daripada kolom 2, kolom 2 lebih tinggi dari kolom 3, dan seterusnya. Jika Anda memiliki satu atau dua titik yang lebih tinggi di kolom kanan daripada kolom di sebelah kiri, baris tersebut mungkin akan mengaburkan sebagian baris di bawahnya, tetapi seharusnya masih terlihat.
Semua data harus berupa jenis numerik kecuali yang pertama, yang dapat berupa angka atau string. Jika kolom pertama adalah jenis string, entri kolom pertama akan ditampilkan sebagai label pada X; jika kolom pertama berupa angka, label sumbu X tidak akan ditampilkan. Semua kolom (kecuali yang pertama) harus berupa angka. Tidak ada batas jumlah kolom.
Opsi Konfigurasi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
backgroundColor | string | '#FFFFFF' (putih) | Warna latar belakang untuk diagram dalam Format warna Chart API. |
warna | Larik<string> | Otomatis | Gunakan ini untuk menetapkan warna tertentu ke setiap rangkaian data. Warna ditentukan
dalam format warna Chart API.
Warna i digunakan untuk kolom data i, yang digabungkan ke awal
jika ada lebih banyak kolom data daripada warna. Jika variasi satu warna
dapat diterima untuk semua seri, gunakan opsi color
sebagai gantinya. |
enableEvents | boolean | salah | Menyebabkan diagram menampilkan peristiwa yang dipicu pengguna seperti klik atau mengarahkan kursor ke mouse. Hanya didukung untuk jenis diagram tertentu. Lihat Peristiwa di bawah. |
tinggi | angka | Tinggi penampung | Tinggi diagram dalam piksel. |
legenda | string | 'kanan' | Posisi dan jenis legenda. Dapat berupa salah satu dari hal berikut:
|
maks. | angka | otomatis | Nilai maksimal yang akan ditampilkan pada sumbu Y. |
mnt | angka | otomatis | Nilai minimal yang akan ditampilkan dalam sumbu Y. |
showCategoryLabels | boolean | benar | Jika ditetapkan ke false, label untuk kategori akan dihapus (label sumbu X). |
showValueLabels | boolean | benar | Jika ditetapkan ke false, label untuk nilai akan dihapus (label sumbu Y). |
judul | string | tanpa judul | Teks yang akan ditampilkan di atas diagram. |
valueLabelsInterval | angka | Otomatis | Interval untuk 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 | angka | Lebar penampung | Lebar diagram dalam piksel. |
Metode
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
draw(data, options) |
tidak ada | Menggambar diagram. |
Acara
Anda dapat mendaftar untuk memproses peristiwa yang dijelaskan di halaman Generic Image Chart.
Kebijakan Data
Lihat kebijakan logging Chart API.