Visualisasi: Diagram Lingkaran (Versi Lama)

Tidak digunakan lagi

Visualisasi ini telah diganti dengan versi baru; gunakan versi baru tersebut. Untuk memudahkan migrasi, lihat halaman catatan rilis.

  1. Ringkasan
  2. Contoh
  3. Memuat
  4. Format Data
  5. Opsi Konfigurasi
  6. Metode
  7. Peristiwa
  8. Kebijakan Data

Ringkasan

Diagram lingkaran yang dirender di browser menggunakan SVG atau VML. Menampilkan tips saat mengklik irisan. Menganimasikan slice saat mengklik entri legenda.

Oleh: Google

Contoh

Menulis kode sendiri di Visualization 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 visualisasi 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
backgroundColor string atau Objek warna default Warna latar belakang untuk area utama diagram. Salah satu opsi berikut:
  • String dengan warna yang didukung oleh HTML, misalnya 'merah' atau '#00cc00', atau
  • Deskripsi objek n dengan properti berikut:
    • stroke - String warna HTML yang mendeskripsikan warna batas diagram.
    • fill - String warna HTML yang mendeskripsikan warna latar belakang diagram.
    • strokeSize - Angka yang menjelaskan ketebalan batas diagram, dalam piksel. Untuk tanpa batas, opsi ini dapat ditetapkan ke 0.
      Contoh: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor string atau Objek warna default Batas di sekitar elemen diagram. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
warna Array string atau objek Warna default

Array warna, dengan setiap elemen menentukan warna dari satu rangkaian. Anda harus menentukan satu elemen array untuk setiap rangkaian.

  • Jika is3D=false, berarti array warna HTML. Contoh: warna:['#00FF00','orange']
  • Jika is3D=true, ini adalah array warna HTML, atau objek dari jenis ini: {color:face_color, darker:shade_color} dengan color adalah warna wajah elemen, dan darker adalah warna bayangan. Namun, jika Anda menentukan warna HTML untuk objek 3D, wajah dan bayangan akan memiliki warna yang sama, dan efek 3D akan dikurangi. Contoh: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true Jika ditetapkan ke benar (true), tooltip akan ditampilkan saat pengguna mengklik irisan.
focusBorderColor string atau Objek warna default Batas di sekitar elemen diagram yang menjadi fokus (diarahkan oleh mouse). Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
tinggi number Tinggi container Tinggi diagram dalam piksel.
is3D boolean false Jika disetel ke benar (true), diagram tiga dimensi akan ditampilkan.
legenda string 'kanan' Posisi dan jenis legenda. Dapat berupa salah satu dari hal berikut:
  • 'right' - Di sebelah kanan diagram.
  • 'left' - Di sebelah kiri diagram.
  • 'top' - Di atas diagram.
  • 'bottom' - Di bawah diagram.
  • 'label' - Label di dekat irisan.
  • 'none' - Tidak ada legenda yang ditampilkan.
legendBackgroundColor string atau Objek warna default Warna latar belakang untuk area legenda diagram. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
legendFontSize number otomatis Ukuran font legenda, dalam piksel.
legendTextColor string atau Objek warna default Warna teks legenda. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
pieJoinAngle number 0 Setiap irisan yang lebih kecil dari sudut ini akan digabungkan menjadi irisan generik berlabel "Lainnya".
pieMinimalAngle number 0

Setiap irisan yang lebih kecil dari sudut ini tidak akan digambar dalam diagram lingkaran (meskipun irisan tersebut tetap akan mendapatkan entri legenda). Irisan yang tersisa akan meluas untuk mengisi lingkaran dalam proporsi tetap. Catatan: Hal ini dapat mendistorsi nilai yang terlihat, terutama jika angka ini besar, karena kuantitas dihapus dari lingkaran.

Untuk menghitung ukuran irisan, sudut pertama yang lebih kecil dari pieJoinAngle akan digabungkan ke irisan "Lainnya", lalu semua irisan yang lebih besar dari pieMinimalAngle akan digambar
title 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 opsi konfigurasi backgroundColor.
titleFontSize number otomatis Ukuran font untuk judul bagan, dalam piksel.

tooltipFontSize		 number 11 Ukuran font teks tooltip. Ukuran ini mungkin dikurangi jika tooltip terlalu kecil untuk menampung teks dalam font yang ditentukan.
tooltipHeight
 number 60 Tinggi tooltip, dalam piksel. Tinggi tooltip bersifat tetap; tidak akan bertambah atau menyusut agar sesuai dengan panjang atau ukuran font teks. Namun, teks yang lebih besar dari 1/3 tinggi diagram akan dipangkas.
tooltipWidth number 120 Lebar tooltip, dalam piksel. Lebar tooltip bersifat tetap; tidak akan bertambah atau menyusut agar sesuai dengan panjang atau ukuran font teks. Namun, ukuran yang lebih besar dari lebar diagram akan dipangkas.
lebar number Lebar container Lebar diagram dalam piksel.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) tidak ada Menggambar diagram.
getSelection() Array elemen pemilihan 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 baris atau pemilihan sel.

Acara

Name Deskripsi Properti
onmouseover Diaktifkan saat pengguna mengarahkan mouse ke sebuah irisan, dan meneruskan indeks baris dan kolom dari sel yang sesuai. baris, kolom
onmouseout Diaktifkan jika pengguna menjauhi sebuah irisan, dan meneruskan indeks baris dan kolom dari sel yang sesuai. 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 memanggilnya hanya setelah peristiwa diaktifkan Tidak ada
select

Diaktifkan saat pengguna mengklik irisan atau legenda. Saat slice dipilih, sel yang sesuai dalam tabel data akan dipilih; jika legenda dipilih, kolom yang sesuai dalam tabel data akan dipilih. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Catatan: Mengklik slice tidak akan mengalihkan antara memilih dan membatalkan pilihan sel; mengklik slice akan selalu memilihnya. Di sisi lain, mengklik entri legenda akan mengalihkan 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.