Visualisasi: Diagram Garis (Gambar)

Penting: Bagian Diagram Gambar di Google Chart Tools tidak lagi digunakan secara resmi secara resmi sejak tanggal 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 garis 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:["imagelinechart"]});
      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.ImageLineChart(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 "imagelinechart". 

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

Nama class visualisasinya adalah google.visualization.ImageLineChart. 

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

Format Data

Kolom pertama harus berupa string dan berisi label kategori. Berapa pun jumlah kolom dapat mengikuti, semuanya harus berupa angka. Setiap kolom ditampilkan sebagai baris terpisah.

Opsi Konfigurasi

Name Jenis Default Deskripsi
backgroundColor string '#FFFFFF' (putih) Warna latar belakang untuk diagram dalam Format warna Chart API.
warna Larik<string> Otomatis Gunakan ini untuk menetapkan warna tertentu ke setiap rangkaian data. Warna ditentukan dalam format warna Chart API. Warna i digunakan untuk kolom data i, yang digabungkan ke awal jika ada lebih banyak kolom data daripada warna. Jika variasi satu warna dapat diterima untuk semua seri, gunakan opsi color sebagai gantinya.
enableEvents boolean salah Menyebabkan diagram menampilkan peristiwa yang dipicu pengguna seperti klik atau mengarahkan kursor ke mouse. Hanya didukung untuk jenis diagram tertentu. Lihat Peristiwa di bawah.
tinggi angka Tinggi penampung Tinggi diagram dalam piksel.
legenda string 'kanan' Posisi dan jenis legenda. Dapat berupa salah satu dari hal berikut:
  • 'kanan' - Di sebelah kanan diagram.
  • 'kiri' - Di sebelah kiri diagram.
  • 'top' - Di atas diagram.
  • 'bawah' - Di bawah diagram.
  • 'tidak ada' - Tidak ada legenda yang ditampilkan.
maks. angka otomatis Nilai maksimal yang akan ditampilkan pada sumbu Y.
mnt angka otomatis Nilai minimal yang akan ditampilkan dalam sumbu Y.
showAxisLines boolean benar Jika disetel ke salah (false), menghapus garis dan label sumbu.
showCategoryLabels boolean sama seperti showAxisLines Jika ditetapkan ke false, label untuk kategori akan dihapus (label sumbu X).
showValueLabels boolean sama seperti showAxisLines Jika ditetapkan ke false, label untuk nilai akan dihapus (label sumbu Y).
judul string tanpa judul Teks yang akan ditampilkan di atas diagram.
valueLabelsInterval angka Otomatis Interval untuk 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 angka Lebar penampung Lebar diagram dalam piksel.

Metode

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

Acara

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

Kebijakan Data

Lihat kebijakan logging Chart API.