Visualisasi: Diagram Kolom (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 batang vertikal yang dirender dalam browser menggunakan SVG atau VML. Menampilkan tips saat mengklik poin. Menganimasikan baris saat mengklik entri legenda. Untuk versi horizontal diagram ini, lihat Diagram Batang.

Oleh: Google

Contoh

Buat 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:["columnchart"]});
      google.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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Memuat

Nama paket google.load adalah "columnchart" 

  google.load("visualization", "1", {packages: ["columnchart"]});

Nama class visualisasi adalah google.visualization.ColumnChart 

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

Format Data

Setiap baris dalam tabel mewakili sekelompok batang yang berdekatan.

Kolom pertama dalam tabel harus berupa string, dan mewakili label kelompok batang tersebut. Sejumlah kolom dapat mengikuti, semuanya numerik, masing-masing mewakili batang dengan warna dan posisi relatif yang sama di setiap kelompok.

Nilai pada baris dan kolom tertentu mengontrol tinggi satu batang yang diwakili oleh baris dan kolom ini.

Opsi Konfigurasi

Name Jenis Default Deskripsi
axisColor string atau Objek warna default Warna sumbu. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
axisBackgroundColor string atau Objek warna default Batas di sekitar latar belakang sumbu. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
axisFontSize number otomatis Ukuran font teks sumbu diagram, dalam piksel.
backgroundColor string atau Objek warna default Warna latar belakang untuk area utama diagram. Dapat berupa salah satu dari opsi berikut:
  • String dengan warna yang didukung oleh HTML, misalnya 'merah' atau '#00cc00'
  • Objek dengan properti stroke fill dan strokeSize. stroke dan fill harus berupa string yang diberi warna. strokeSize adalah angka. Contoh: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Untuk menggunakan isian saja, tanpa goresan, gunakan stroke:null, strokeSize: 0.
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 kolom.
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), akan menampilkan perubahan tiga dimensi.
isStacked boolean false Jika ditetapkan ke benar (true), nilai baris akan ditumpuk (diakumulasi).
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.
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 untuk entri teks pada legenda. Nilai yang mungkin adalah nilai opsi konfigurasi backgroundColor.
logScale boolean false Jika true (benar), sumbu utama harus diskalakan secara logaritma.
max number otomatis Menentukan garis petak sumbu Y tertinggi. Garis petak yang sebenarnya akan merupakan nilai yang lebih besar dari dua nilai: nilai opsi maks, atau nilai data tertinggi, yang dibulatkan ke tanda petak lebih tinggi berikutnya.
mnt number otomatis Menentukan garis petak sumbu Y terendah. Garis petak yang sebenarnya akan menjadi nilai yang lebih rendah dari dua nilai: nilai opsi min, atau nilai data terendah, yang dibulatkan ke bawah ke tanda petak bawah berikutnya .
reverseAxis boolean false Jika disetel ke true, kategori akan digambar dari kanan ke kiri. Defaultnya adalah menggambar dari kiri ke kanan.
showCategories boolean true Jika true (benar), label kategori akan ditampilkan. Jika salah, tidak akan dilakukan.
title string tanpa judul Teks yang akan ditampilkan di atas diagram.
titleX string tanpa judul Teks yang akan ditampilkan di bawah sumbu horizontal.
titleY string tanpa judul Teks yang akan ditampilkan menurut sumbu vertikal.
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 kolom dan sel. Hanya satu kolom atau sel yang dapat dipilih pada satu waktu oleh pengguna.
setSelection() tidak ada Implementasi setSelection() standar, tetapi hanya mendukung pemilihan satu elemen. Memperlakukan setiap entri pilihan sebagai kolom atau pemilihan sel. Perhatikan bahwa kolom label tidak dapat dipilih.

Acara

Name Deskripsi Properti
onmouseover Diaktifkan saat pengguna mengarahkan mouse ke batang, dan meneruskan indeks baris dan kolom dari sel yang sesuai. baris, kolom
onmouseout Diaktifkan saat pengguna menjauhi batang, 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 batang atau legenda. Saat batang dipilih, sel yang sesuai dalam tabel data akan dipilih; jika legenda dipilih, kolom yang sesuai dalam tabel data akan dipilih. Untuk mempelajari opsi yang telah dipilih, panggil getSelection(). Tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.