Visualisasi: Diagram Gambar Umum

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

Ringkasan

Generic Image Chart adalah wrapper umum untuk semua diagram yang dihasilkan oleh Google Chart API. Baca dokumentasi Chart API sebelum mencoba menggunakan visualisasi ini. Perlu diketahui bahwa Anda dapat mengirim hingga 16 ribu data menggunakan visualisasi ini, tidak seperti batas 2 ribu dalam 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 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, Generic Image Chart 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 visualisasinya 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 URL nilai apa pun yang diteruskan sebagai data atau opsi.

Diagram Peta

Diagram peta menggunakan tabel data dengan dua kolom yang diperlukan:

Lihat dokumentasi diagram peta untuk mengetahui 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 - Jumlah kolom numerik, yang masing-masing mewakili seri data.
  • Kolom terakhir - [opsional, string] Jumlah kolom string apa pun setelah kolom data, dengan setiap entri yang mewakili label titik data untuk diagram yang mendukungnya. Jika ingin menggunakan kolom ini, Anda harus menentukan opsi annotationColumns.

Data akan ditampilkan dalam berbagai cara, bergantung pada jenis diagram. Lihat dokumentasi untuk diagram Anda.

Catatan tentang indeks kolom: Visualisasi Diagram Gambar Umum 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 di 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 ditentukan untuk visualisasi ini. Tentukan semuanya dalam objek opsi yang diteruskan ke metode draw() visualisasi. Tidak semua opsi berikut didukung untuk semua jenis diagram; lihat dokumentasi untuk jenis diagram gambar statis Anda. Anda dapat meneruskan parameter URL Chart API 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 umum akan menerima kode warna dengan atau tanpa tanda #.

Name Jenis Default Deskripsi
anotasiKolom Array<object> tidak ada

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

Setiap objek dalam array memiliki properti berikut:

  • column [angka] - Indeks berbasis nol untuk kolom yang menyimpan teks yang digunakan dalam anotasi. Anda tidak memerlukan nilai di setiap baris kolom ini.
  • positionColumn [angka] - Indeks berbasis nol untuk 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] - 'rendah', 'sedang', atau 'tinggi', yang menentukan lapisan tempat label akan digambar. Defaultnya adalah 'medium', yang menentukan bahwa label akan digambar setelah batang dan garis, tetapi sebelum label lainnya.
  • type [string] - 'teks' atau 'flag'. 'text' membuat anotasi teks biasa, dan 'flag' akan membuat anotasi balon ucapan.

Contoh - Cuplikan ini menentukan label teks 12 piksel hitam, 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 seri; setiap rangkaian akan menjadi gradasi warna yang ditentukan. Warna ditentukan dalam format warna Chart API. Diabaikan jika colors ditentukan.
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.
fill boolean salah Jika true (benar), isi area di bawah setiap baris. Hanya tersedia untuk diagram garis.
firstHiddenColumn angka 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 angka 200 Tinggi diagram, dalam piksel. Jika elemen tersebut tidak ada atau tidak berada dalam rentang yang dapat diterima, tinggi elemen penampungnya akan digunakan. Jika nilai tersebut juga berada di luar rentang yang dapat diterima, tinggi default akan digunakan.
label string 'tidak ada'

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

  • 'tidak ada' - Tidak ada label.
  • 'value' - Menampilkan nilai slice sebagai label.
  • 'name' - Menampilkan nama slice (nama kolom) sebagai label.
legenda string 'kanan' Tempat menampilkan legenda diagram, yang terkait dengan diagram. Tentukan salah satu nilai berikut: 'top', 'bottom', 'left', 'right', 'none'. Diabaikan dalam diagram yang tidak menyertakan legenda (seperti diagram peta).
maks. angka Nilai data maksimum Nilai maksimum yang ditampilkan pada skala. Diabaikan untuk diagram lingkaran. Defaultnya adalah nilai data maksimum, kecuali diagram batang, dengan default adalah nilai data maksimum. Ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data.
mnt angka Nilai data mimimum Nilai minimum yang ditampilkan pada skala. Diabaikan untuk diagram lingkaran. Defaultnya adalah nilai data minimum, kecuali untuk diagram batang, dengan default adalah nol. Hal ini diabaikan untuk diagram batang jika tabel memiliki lebih dari satu kolom data.
showCategoryLabels boolean benar Apakah label harus muncul pada sumbu kategori (yaitu baris). Hanya tersedia untuk diagram garis dan batang.
showValueLabels boolean benar Benar menampilkan label pada sumbu nilai. Hanya tersedia untuk diagram garis dan batang.
DisplayKolom Tunggal angka tidak ada Hanya merender kolom data yang ditentukan. Angka ini merupakan indeks berbasis nol ke dalam tabel, dengan angka nol adalah kolom data pertama. Warna yang ditetapkan ke kolom tunggal sama dengan warna semua kolom dirender. Tidak dapat digunakan dengan diagram lingkaran atau lingkaran.
judul string String kosong Judul diagram. Jika tidak ditentukan, judul tidak akan ditampilkan. Parameter diagram yang setara adalah chtt.
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 400 Lebar diagram, dalam piksel. Jika tidak ada atau tidak ada dalam rentang yang dapat diterima, lebar elemen yang memuatnya akan digunakan. Jika nilai tersebut 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 panjangnya bisa lebih dari 2.000 karakter. Lihat Google Chart API untuk detail selengkapnya.

Acara

Jika Anda menetapkan properti enableEvents ke 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 Jenis Nilai
error Dipicu jika terjadi error saat mencoba merender diagram. id, pesan
onmouseover Diaktifkan saat pengguna mengarahkan mouse ke elemen diagram. "arahkan mouse"
onmouseout Dipicu jika pengguna mengarahkan mouse ke elemen diagram. "mouseout" (mouseout)
onclick Diaktifkan saat pengguna mengklik elemen diagram.

"klik"

Diagram mana yang mendukung peristiwa?

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

Contoh Penanganan Peristiwa

Berikut adalah contoh yang menampilkan batang yang mencatat 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.