Visualisasi: Diagram Batang (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 batang 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:["imagebarchart"]});
      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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Memuat

Nama paket google.charts.load adalah "imagebarchart" 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

Nama class visualisasi adalah google.visualization.ImageBarChart 

  var visualization = new google.visualization.ImageBarChart(container);

Format Data

Kolom pertama harus berupa string dan berisi label kategori. Berapa pun jumlah kolom bisa diikuti, semuanya harus berupa angka. Setiap kolom ditampilkan sebagai kumpulan batang. Jika tabel data berisi lebih dari satu kolom numerik, nilai dalam satu baris ditampilkan sebagai batang bertumpuk.

Opsi Konfigurasi

Name Jenis Default Deskripsi
backgroundColor string '#FFFFFF' (putih) Warna latar belakang untuk diagram dalam format warna Chart API.
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.
isStacked boolean true Mengontrol apakah beberapa kolom data akan ditampilkan sebagai batang bertumpuk (bukan yang dikelompokkan).
isVertical boolean false Mengontrol apakah batang akan vertikal.
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.
  • 'none' - Tidak ada legenda yang ditampilkan.
max number otomatis Nilai maksimal untuk ditampilkan dalam sumbu Y.
mnt number otomatis Nilai minimal untuk ditampilkan dalam sumbu Y.
showCategoryLabels boolean true Jika disetel ke salah (false), label kategori akan dihapus.
showValueLabels boolean true Jika kebijakan disetel ke salah (false), label nilai akan dihapus.
title string tanpa judul Teks yang akan ditampilkan di atas diagram.
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 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.