Visualisasi: Diagram Lingkaran (Gambar)

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.

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

Ringkasan

Diagram lingkaran 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:["imagepiechart"]});
      google.charts.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.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Memuat

Nama paket google.charts.load adalah "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

Nama class visualisasi adalah google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(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

Anda dapat menentukan opsi berikut sebagai bagian dari objek options yang diteruskan ke metode draw() visualisasi.

Name Jenis Default Deskripsi
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.
tinggi number Tinggi container Tinggi diagram dalam piksel.
is3D boolean false Jika disetel ke benar (true), diagram tiga dimensi akan ditampilkan.
label string 'tidak ada'

Label, jika ada, yang akan ditampilkan untuk setiap irisan. Pilih dari nilai berikut:

  • 'none' - Tidak ada label.
  • 'value' - Gunakan nilai irisan sebagai label.
  • 'name' - Gunakan nama irisan (nama kolom).
legenda string 'kanan' Lokasi legenda pada diagram. Pilih dari salah satu nilai berikut: 'top', 'bottom', 'left', 'right', 'none'.
title string tanpa judul Teks yang akan ditampilkan di atas diagram.
lebar number Lebar container Lebar diagram dalam piksel.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) tidak ada Menggambar diagram.

Acara

Anda dapat mendaftar untuk mendengarkan peristiwa yang dijelaskan di halaman Generic Image Chart.

Kebijakan Data

Lihat kebijakan logging Chart API.