Visualisasi: Diagram Gambar Generik

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
  9. Pelokalan

Ringkasan

Diagram Gambar Generik adalah wrapper umum untuk semua diagram yang dihasilkan oleh Google Chart API. Baca dokumentasi Chart API sebelum mencoba menggunakan visualisasi ini. Perhatikan bahwa Anda dapat mengirim hingga 16 ribu data menggunakan visualisasi ini, tidak seperti batas 2 ribu untuk panggilan langsung ke Chart API.

Semua data diteruskan ke diagram menggunakan DataTable atau DataView. Selain itu, beberapa label diteruskan sebagai kolom dalam tabel data.

Semua parameter URL Chart API lainnya (kecuali untuk chd) diteruskan sebagai opsi.

Oleh: Google

Contoh

Berikut adalah contoh dari beberapa jenis diagram.

Diagram Garis

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Diagram Batang Vertikal

Perhatikan bahwa dalam diagram batang yang digabungkan, Anda tidak perlu menentukan chxt='x' seperti yang Anda lakukan jika memanggil diagram sendiri; jika Anda tidak menentukan sumbu, Diagram Gambar Umum akan mencoba menyiapkan diagram dengan benar secara default.

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Diagram Lingkaran

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Diagram Radar

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Diagram Peta

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Memuat

Nama paket google.charts.load adalah 'imagechart'

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

Nama class visualisasi adalah google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Format Data

Ada dua format data umum: satu untuk diagram peta dan satu untuk semua diagram lainnya. Perhatikan bahwa satu-satunya format numerik yang didukung untuk data adalah jenis Nomor JavaScript.

Catatan Anda tidak boleh mengenkode nilai string apa pun ke URL sebagai data atau opsi.

Diagram Peta

Diagram peta mengambil tabel data yang berisi dua kolom:

Lihat dokumentasi diagram peta untuk informasi selengkapnya.

Diagram Non-Peta

Diagram non-peta mengambil tabel data dengan dua kolom opsional (satu di awal, satu di akhir), dan satu atau beberapa kolom data di antaranya:

  • Kolom pertama - [opsional, string] Setiap entri mewakili label yang digunakan pada sumbu X (setara dengan parameter chl atau chxl) untuk diagram yang mendukungnya.
  • Kolom berikutnya - Sejumlah kolom numerik, masing-masing mewakili deret data.
  • Kolom terakhir - [opsional, string] Berapa pun jumlah kolom string setelah kolom data, dengan setiap entri merepresentasikan label titik data untuk diagram yang mendukungnya. Jika ingin menggunakan kolom ini, Anda harus menentukan opsi annotationColumns.

Data akan ditampilkan dengan cara yang berbeda, bergantung pada jenis diagram. Lihat dokumentasi untuk diagram Anda.

Catatan tentang indeks kolom: Visualisasi Diagram Gambar Generik menghapus kolom string dari tabel data sebelum mengirim tabel ke layanan Chart API. Oleh karena itu, indeks kolom dalam opsi, metode, dan peristiwa yang ditentukan pada halaman ini menyertakan kolom string dalam jumlah indeks; tetapi indeks kolom dalam opsi apa pun yang ditangani oleh layanan Chart API (misalnya opsi chm) mengabaikan kolom string dalam jumlah indeks.

Opsi Konfigurasi

Opsi berikut ditetapkan untuk visualisasi ini. Tentukan parameter tersebut dalam objek opsi yang diteruskan ke metode draw() visualisasi. Tidak semua opsi berikut didukung untuk semua jenis diagram; baca dokumentasi untuk jenis diagram gambar statis Anda. Anda dapat meneruskan parameter URL Chart API apa pun sebagai opsi. Misalnya, parameter URL chg=50,50 dari visualisasi Diagram akan ditentukan dengan cara ini: options['chg'] = '50,50'.

Catatan tentang warna: Opsi warna seperti colors, color, dan backgroundColor ditentukan dalam format warna Chart API. Format ini mirip dengan format #RRGGBB, kecuali bahwa format ini menyertakan angka heksadesimal keempat opsional untuk menunjukkan transparansi. Warna yang dapat dibaca manusia, seperti 'merah', 'hijau', 'biru', dll. tidak didukung. Format warna Chart API tidak menyertakan simbol # di awal, tetapi opsi visualisasi diagram gambar generik akan menerima kode warna dengan atau tanpa #.

Name Jenis Default Deskripsi
annotationColumns Array<object> tidak ada

Label titik data untuk berbagai jenis diagram. Elemen ini adalah array objek, yang masing-masing menetapkan label berformat ke satu titik data pada diagram. Opsi ini hanya tersedia untuk diagram yang mendukung titik data (lihat topik yang ditautkan untuk mempelajari yang mana), dan tabel data harus memiliki minimal salah satu kolom label string.

Setiap objek dalam array memiliki properti berikut:

  • column [angka] - Indeks berbasis nol dari kolom yang menyimpan teks yang digunakan dalam anotasi. Anda tidak memerlukan nilai di setiap baris kolom ini.
  • positionColumn [angka] - Indeks berbasis nol dari kolom yang menyimpan titik data yang diberi label. Defaultnya adalah kolom data pertama.
  • color [string] - Warna teks anotasi dalam format warna Chart API. Defaultnya adalah '#000000' (hitam).
  • size [angka] - Ukuran font anotasi, dalam piksel.
  • priority [string] - Dapat berupa 'low', 'medium', atau 'high', yang menentukan lapisan tempat label harus digambar. Defaultnya adalah 'medium', yang menentukan bahwa label digambar setelah batang dan garis, tetapi sebelum label lainnya.
  • type [string] - Baik 'teks' maupun 'flag'. 'text' membuat anotasi teks biasa, dan 'flag' membuat anotasi balon ucapan.

Contoh - Cuplikan ini mendefinisikan label teks hitam berukuran 12 piksel, dengan teks yang diambil dari kolom 0, dan ditetapkan ke titik data di kolom 2 pada baris yang sama: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
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.
fill boolean false Jika true (benar), akan mengisi area di bawah setiap baris. Hanya tersedia untuk diagram garis.
firstHiddenColumn number tidak ada

Indeks kolom data. Kolom yang tercantum, serta semua kolom berikut, tidak akan digunakan untuk menggambar elemen rangkaian diagram utama (seperti garis pada diagram garis, atau batang pada diagram batang), tetapi digunakan sebagai data untuk penanda dan anotasi lainnya. Perhatikan bahwa kolom string disertakan dalam jumlah indeks ini.
tinggi number 200 Tinggi diagram, dalam piksel. Jika tidak ada atau tidak dalam rentang yang dapat diterima, tinggi elemen penampung akan digunakan. Jika itu juga berada di luar rentang yang dapat diterima, tinggi default akan digunakan.
label string 'tidak ada'

[Khusus diagram lingkaran] Label, jika ada, yang akan ditampilkan untuk setiap irisan. Pilih dari nilai berikut:

  • 'none' - Tidak ada label.
  • 'value' - Menampilkan nilai irisan sebagai label.
  • 'name' - Menampilkan nama irisan (nama kolom) sebagai label.
legenda string 'kanan' Tempat menampilkan legenda diagram, relatif terhadap diagram. Tentukan salah satu dari nilai berikut: 'top', 'bottom', 'left', 'right', 'none'. Diabaikan dalam diagram yang tidak menyertakan legenda (seperti diagram peta).
max number Nilai data maksimum Nilai maksimum yang ditampilkan pada timbangan. Diabaikan untuk diagram lingkaran. Nilai defaultnya adalah nilai data maksimum, kecuali untuk diagram batang, dengan nilai defaultnya adalah nilai data maksimum. Nilai ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data.
mnt number Nilai data Mimimum Nilai minimum yang ditampilkan pada timbangan. Diabaikan untuk diagram lingkaran. Nilai defaultnya adalah nilai data minimum, kecuali untuk diagram batang, dengan nilai defaultnya adalah nol. Nilai ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data.
showCategoryLabels boolean true Apakah label harus muncul pada sumbu kategori (yaitu baris). Hanya tersedia untuk diagram garis dan batang.
showValueLabels boolean true True menampilkan label pada sumbu nilai. Hanya tersedia untuk diagram garis dan batang.
singleColumnDisplay number tidak ada Hanya merender kolom data yang ditentukan. Angka ini adalah indeks berbasis nol ke dalam tabel, dengan nol adalah kolom data pertama. Warna yang ditetapkan untuk satu kolom sama seperti saat semua kolom dirender. Tidak dapat digunakan dengan diagram lingkaran atau peta.
title string String kosong Judul diagram. Jika tidak ditentukan, judul tidak akan ditampilkan. Parameter diagram yang setara adalah chtt.
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 400 Lebar diagram, dalam piksel. Jika tidak ada atau tidak dalam rentang yang dapat diterima, lebar elemen penampung akan digunakan. Jika itu juga berada di luar rentang yang dapat diterima, lebar default akan digunakan.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) Tidak ada Menggambar peta.
getImageUrl() String Menampilkan URL Google Chart API yang digunakan untuk meminta diagram. Perhatikan bahwa panjangnya dapat lebih dari 2.000 karakter. Lihat Google Chart API untuk detail selengkapnya.

Acara

Jika Anda menetapkan properti enableEvents ke benar (true), diagram pendukung akan menampilkan peristiwa untuk peristiwa pengguna yang tercantum dalam tabel di bawah. Semua peristiwa ini menampilkan objek event dengan properti berikut:

  • type - String yang mewakili jenis peristiwa.
  • region - ID untuk wilayah yang terpengaruh. Tambahkan parameter chof=json ke jenis diagram mentah untuk melihat daftar nama yang tersedia. Lihat chof=json untuk detail selengkapnya.
Name Deskripsi type Value
error Diaktifkan saat terjadi error saat mencoba merender diagram. id, pesan
onmouseover Diaktifkan saat pengguna mengarahkan mouse ke elemen diagram. "arahkan mouse"
onmouseout Diaktifkan saat pengguna mengarahkan mouse dari elemen diagram. "mouseout"
onclick Diaktifkan saat pengguna mengklik elemen diagram.

"klik"

Diagram mana yang mendukung peristiwa?

Semua diagram yang mendukung parameter chof=json mendukung peristiwa pelemparan (yaitu, semua diagram kecuali diagram khusus, misalnya kode QR).

Contoh Penanganan Peristiwa

Berikut adalah contoh yang menunjukkan batang yang merekam klik mouse.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Kebijakan Data

Data dikirim ke layanan Google Chart API.

Pelokalan

Visualisasi ini mendukung pelokalan apa pun yang didukung oleh layanan Google Chart.