Tidak digunakan lagi
Visualisasi ini telah diganti dengan versi baru; sebagai gantinya, gunakan versi tersebut. Untuk memudahkan migrasi, lihat halaman catatan rilis.
Ringkasan
Diagram lingkaran yang dirender dalam browser menggunakan SVG atau VML. Menampilkan tips saat mengklik potongan-potongan. Menganimasikan slice saat mengklik entri legenda.
Oleh: Google
Contoh
Buat kode sendiri di Visualisasi Playground
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Memuat
Nama paket google.load
adalah "piechart"
google.load("visualization", "1", {packages: ["piechart"]});
Nama class visualisasinya adalah google.visualization.PieChart
var visualization = new google.visualization.PieChart(container);
Format Data
Dua kolom. Kolom pertama harus berupa string dan berisi label irisan. Kolom kedua harus berupa angka, dan berisi nilai irisan.
Opsi Konfigurasi
Name | Jenis | Default | Deskripsi |
---|---|---|---|
WarnaWarnaLatar Belakang | string atau Objek | warna default | Warna latar belakang untuk area utama diagram.
Salah satu dari opsi berikut:
|
batasWarna | string atau Objek | warna default | Batas di sekitar elemen diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor. |
warna | Array string atau objek | Warna default | Array warna, dengan setiap elemen menentukan warna satu rangkaian. Anda harus menentukan satu elemen array untuk setiap seri.
|
enableTooltip | boolean | benar | Jika disetel ke benar (true), tooltip ditampilkan saat pengguna mengklik bagian. |
FocusBorderColor | string atau Objek | warna default | Batas di sekitar elemen diagram yang menjadi fokus (diarahkan oleh mouse). Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor. |
tinggi | angka | Tinggi penampung | Tinggi diagram dalam piksel. |
3D | boolean | salah | Jika disetel ke benar (true), diagram tiga dimensi akan ditampilkan. |
legenda | string | 'kanan' | Posisi dan jenis legenda. Dapat berupa salah satu dari hal berikut:
|
legendaWarnaWarnaLatar Belakang | string atau Objek | warna default | Warna latar belakang untuk area legenda diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor. |
legendFontSize | angka | otomatis | Ukuran font legenda, dalam piksel. |
legendaTeksWarna | string atau Objek | warna default | Warna teks legenda. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor. |
PaiGabung | angka | 0 | Setiap irisan yang kurang dari sudut ini akan digabungkan menjadi irisan generik berlabel "Lainnya". |
paiMinimalAngle | angka | 0 | Setiap bagian yang lebih kecil dari sudut ini tidak akan digambar dalam diagram lingkaran (meskipun akan tetap mendapatkan entri legenda). Potongan yang tersisa akan diperluas untuk mengisi lingkaran dengan proporsi tetap. Catatan: Tindakan ini dapat mendistorsi nilai yang jelas, terutama jika angka ini besar, karena kuantitas dihapus dari lingkaran. Untuk menghitung ukuran irisan, sudut pertama yang lebih kecil dari pieJoinAngle digabungkan ke irisan "Other", dan kemudian semua irisan yang lebih besar dari pieMinimalAngle digambar |
judul | string | tanpa judul | Teks yang akan ditampilkan di atas diagram. |
titleColor | string atau Objek | warna default | Warna untuk judul diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor. |
titleFontSize | angka | otomatis | Ukuran font untuk judul diagram, dalam piksel. |
tooltipFontSize |
angka | 11 | Ukuran font teks tooltip. Hal ini mungkin dikurangi, jika tooltip terlalu kecil untuk menyimpan teks dalam font yang ditentukan. |
tooltipTinggi |
angka | 60 | Tinggi tooltip, dalam piksel. Tinggi tooltip bersifat tetap; tidak akan bertambah atau berkurang agar sesuai dengan panjang atau ukuran font teks. Namun, apa pun yang lebih besar dari 1/3 tinggi diagram akan dipangkas. |
Lebar tooltip | angka | 120 | Lebar tooltip, dalam piksel. Lebar tooltip bersifat tetap; tidak akan pernah bertambah atau berkurang agar sesuai dengan panjang atau ukuran font teks. Namun, apa pun yang lebih besar dari lebar diagram akan dipangkas. |
lebar | angka | Lebar penampung | Lebar diagram dalam piksel. |
Metode
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
draw(data, options) |
tidak ada | Menggambar diagram. |
getSelection() |
Array elemen pilihan | Implementasi getSelection() standar. Elemen yang dipilih adalah
elemen baris dan sel. Beberapa baris dan/atau satu sel dapat dipilih sekaligus oleh pengguna. |
setSelection() |
tidak ada | Implementasi setSelection() standar, tetapi mendukung pemilihan
beberapa baris dan/atau satu sel. Memperlakukan setiap entri pilihan sebagai pilihan baris atau sel. |
Acara
Name | Deskripsi | Properti |
---|---|---|
onmouseover |
Dipicu jika pengguna mengarahkan mouse ke suatu irisan, dan meneruskan indeks baris dan kolom sel yang sesuai. | baris, kolom |
onmouseout |
Dipicu jika pengguna mouse menjauh dari potongan, dan meneruskan indeks baris serta kolom sel yang bersangkutan. | baris, kolom |
ready |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan
diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses
untuk peristiwa ini sebelum memanggil metode draw , dan memanggil
hanya setelah peristiwa diaktifkan |
Tidak ada |
select |
Dipicu jika pengguna mengklik bagian atau legenda. Jika bagian dipilih,
sel yang sesuai di tabel data akan dipilih; saat legenda
dipilih, kolom yang sesuai dalam tabel data akan dipilih. Untuk mempelajari
apa yang telah dipilih, panggil Catatan: Mengklik slice tidak beralih antara memilih dan membatalkan pilihan sel; mengklik slice selalu memilihnya. Di sisi lain, mengklik entri legenda akan beralih antara memilih dan membatalkan pilihan baris. |
Tidak ada |
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.