Diagram Gambar Batang Lilin

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 lilin yang dirender sebagai gambar menggunakan Google Chart API.

Diagram batang lilin digunakan untuk menampilkan nilai pembuka dan penutup yang ditempatkan di atas total varians. Diagram batang lilin sering digunakan untuk menampilkan perilaku nilai saham. Di diagram ini, item dengan nilai pembuka kurang dari nilai penutup akan digambar dengan warna hijau, dan item yang nilai pembukanya lebih besar dari nilai penutup akan digambar dengan warna merah. Lihat dokumentasi batang lilin di Google Chart API untuk informasi lebih lanjut.

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:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Memuat

Nama paket google.charts.load adalah "imagechart". 

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

Nama class visualisasi adalah google.visualization.ImageCandlestickChart. 

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

Format Data

Lima kolom, dengan setiap baris mendeskripsikan satu penanda batang lilin:

  • Col 0: String yang digunakan sebagai label untuk penanda ini pada sumbu X.
  • Kol 1: Angka yang menentukan nilai rendah/minimum penanda ini. Ini adalah dasar garis hitam.
  • Kol 2: Angka yang menentukan nilai pembuka/awal penanda ini. Ini adalah satu batas vertikal lilin. Jika lebih kecil dari nilai kolom 3, lilin akan menjadi hijau; jika tidak, warnanya akan merah.
  • Kol 3: Angka yang menentukan nilai penutup/akhir penanda ini. Ini adalah batas vertikal kedua lilin. Jika lebih kecil dari nilai kolom 2, lilin akan menjadi merah; jika tidak, warnanya akan hijau.
  • Kol 4: Angka yang menentukan nilai tinggi/maksimum penanda ini. Ini adalah bagian atas garis hitam.

Opsi Konfigurasi

Selain opsi yang didukung oleh Generic Image Chart, Diagram Batang Lilin mendukung opsi berikut:

Name Jenis Default Deskripsi
backgroundColor string '#FFFFFF' (putih) Warna latar belakang diagram. Ini adalah string #RRGGBB, termasuk tanda #.
showAxisLines boolean true Menentukan apakah akan menampilkan garis sumbu. Jika disetel ke salah (false), label sumbu juga tidak akan ditampilkan.
tinggi number Tinggi elemen penampung Tinggi diagram, dalam piksel. Jika 30 < height atau height > 1.000,nilai ini akan ditetapkan secara default ke 200.
max number Nilai data maksimum Nilai sumbu Y maksimum.
mnt number Nilai data minimum Nilai sumbu Y minimum.
showCategoryLabels boolean true Jika salah, label sumbu X akan disembunyikan.
showValueLabels boolean true Jika salah, label sumbu Y akan disembunyikan.
showValueLabelsInternal number otomatis Spasi antara label sumbu Y, dalam piksel.
title string '' Teks yang akan ditampilkan di atas diagram.
lebar number Lebar elemen penampung Lebar diagram, dalam piksel. Jika width kurang dari 30 atau lebih besar dari 1.000, width akan ditetapkan ke 300.

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.