Peta hierarki

  1. Ringkasan
  2. Contoh
  3. Sorotan
  4. Tooltip
  5. Memuat
  6. Format Data
  7. Opsi Konfigurasi
  8. Metode
  9. Peristiwa
  10. Kebijakan Data

Ringkasan

Representasi visual hierarki data, dengan setiap node dapat memiliki nol turunan atau lebih, dan satu induk (kecuali untuk root, yang tidak memiliki induk). Setiap node ditampilkan sebagai persegi panjang, yang berukuran dan diberi warna sesuai dengan nilai yang Anda tetapkan. Ukuran dan warna dinilai secara relatif terhadap semua node lain dalam grafik. Anda dapat menentukan jumlah level yang ditampilkan secara bersamaan, dan jika ingin, untuk menampilkan level yang lebih dalam dengan petunjuk. Jika node adalah node daun, Anda dapat menentukan ukuran dan warna; jika bukan daun, node akan ditampilkan sebagai kotak pembatas untuk node daun. Perilaku defaultnya adalah bergerak ke bawah pada hierarki saat pengguna mengklik kiri node, dan kembali ke atas hierarki saat pengguna mengklik kanan grafik.

Ukuran total grafik ditentukan oleh ukuran elemen penampung yang Anda sisipkan di halaman. Jika Anda memiliki node daun dengan nama yang terlalu panjang untuk ditampilkan, nama tersebut akan dipotong dengan elipsis (...).

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':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Sorotan

Anda dapat menentukan apakah elemen harus disorot, dan menetapkan warna spesifik untuk elemen tertentu yang akan digunakan saat hal ini terjadi. Untuk mengaktifkan sorotan, setel highlightOnMouseOver:true (untuk v49 atau sebelumnya) atau enableHighlight: true (untuk v50+). Dari sana, Anda dapat menetapkan warna yang akan digunakan untuk menyorot elemen menggunakan berbagai opsi HighlightColor. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

Tips alat

Secara default, tooltip peta hierarki bersifat dasar, yang menampilkan label sel peta hierarki. Hal ini berguna jika sel terlalu kecil untuk menampung label, tetapi Anda dapat menyesuaikannya lebih lanjut seperti yang dijelaskan di bagian ini.

Tooltip peta hierarki disesuaikan secara berbeda dari diagram lain: Anda menentukan fungsi, lalu menetapkan opsi generateTooltip ke fungsi tersebut. Berikut adalah contoh sederhana:

Pada diagram di atas, kita menentukan fungsi bernama showStaticTooltip yang hanya menampilkan string dengan HTML yang akan ditampilkan setiap kali pengguna mengarahkan kursor ke sel peta hierarki. Cobalah! Kode untuk membuatnya adalah sebagai berikut:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

Fungsi generateTooltip dapat berupa JavaScript apa pun yang Anda sukai. Biasanya, Anda memerlukan tooltip yang bervariasi berdasarkan nilai data. Contoh berikut menunjukkan cara mengakses setiap kolom dalam tabel data.

Jika mengarahkan kursor ke sel dalam peta hierarki di atas, Anda akan melihat tooltip yang berbeda untuk setiap sel. Semua fungsi tooltip peta hierarki menggunakan tiga nilai: row, size, dan value.

  • row: baris sel dari tabel data
  • size: jumlah nilai (kolom 3) dari sel ini dan semua turunannya
  • value: warna sel, yang dinyatakan sebagai angka dari 0 hingga 1

Dalam showFullTooltip, string yang kita tampilkan adalah kotak HTML dengan lima baris:

  • Baris 1 menampilkan baris yang sesuai dari tabel data, yang menggunakan data.getValue secara bebas.
  • Baris 2 memberi tahu Anda baris mana, yang hanya merupakan parameter row.
  • Baris 3 memberi Anda informasi dari kolom 3 tabel data: jumlah nilai kolom 3 dari baris ini, ditambah nilai dari turunan.
  • Baris 4 memberi Anda informasi dari kolom 4 dari tabel data tersebut. Nilai merupakan nilai, tetapi dinyatakan sebagai angka antara 0 dan 1 yang sesuai dengan warna sel.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

Memuat

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

  google.charts.load("current", {packages: ["treemap"]});

Nama class visualisasi adalah google.visualization.TreeMap.

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

Format Data

Setiap baris dalam tabel data menjelaskan satu node (persegi panjang dalam grafik). Setiap node (kecuali node root) memiliki satu node induk. Setiap node diberi ukuran dan diberi warna sesuai dengan nilainya yang terkait dengan node lain yang saat ini ditampilkan.

Tabel data harus memiliki empat kolom dalam format berikut:

  • Kolom 0 - [string] ID untuk node ini. String ini dapat berupa string JavaScript yang valid, termasuk spasi, dan panjang yang dapat ditampung string. Nilai ini ditampilkan sebagai header node.
  • Kolom 1 - [string] - ID node induk. Jika ini adalah node root, biarkan kosong. Hanya satu root yang diizinkan per peta hierarki.
  • Kolom 2 - [angka] - Ukuran node. Nilai positif apa pun diizinkan. Nilai ini menentukan ukuran node, yang dihitung secara relatif terhadap semua node lain yang saat ini ditampilkan. Untuk node non-leaf, nilai ini diabaikan dan dihitung dari ukuran semua turunannya.
  • Kolom 3 - [opsional, angka] - Nilai opsional yang digunakan untuk menghitung warna untuk node ini. Nilai apa pun, positif atau negatif, akan diizinkan. Nilai warna pertama kali dihitung ulang pada skala dari minColorValue hingga maxColorValue, lalu node diberi warna dari gradien antara minColor dan maxColor.

Opsi Konfigurasi

Name
enableHighlight (untuk v50+)

Menentukan apakah elemen harus menunjukkan efek yang disorot. Pemicu default adalah saat kursor diarahkan ke atasnya. Pemicu dapat dikonfigurasi dengan eventsConfig. Jika ditetapkan ke true, penandaan untuk berbagai elemen dapat ditentukan menggunakan berbagai opsi highlightColor.

Jenis: boolean
Default: false
eventsConfig (untuk v50+)

Konfigurasi peristiwa untuk memicu interaksi peta hierarki. Format untuk mengonfigurasi interaksi:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
Jika array konfigurasi tidak ditentukan atau tidak ada untuk interaksi, nilai default akan digunakan.
Jika konfigurasi adalah array kosong, interaksi akan dinonaktifkan.
Untuk konfigurasi yang valid, mouse_event diperlukan dan harus berupa peristiwa mouse yang didukung. Kemudian, Anda dapat memiliki hingga empat pengubah kunci opsional.
Interaksi yang didukung:
sorot, hapus sorotan, gabungkan, lihat perincian.
Peristiwa mouse yang didukung:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. Penggunaan 'contextmenu' sesuai dengan klik kanan.
Tombol pengubah peristiwa mouse yang didukung:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
Dapatkan konfigurasi saat ini:
Metode panggilan getEventsConfig().
Contoh penggunaan Control+Shift+Right_Click untuk naik ke hierarki:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Jenis: objek
Default: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

Warna teks. Tentukan nilai warna HTML.

Jenis: string
Default: #ffffff
fontFamily

Jenis font yang akan digunakan untuk semua teks.

Jenis: string
Default: otomatis
fontSize

Ukuran font untuk semua teks, dalam poin.

Jenis: nomor
Default: 12
forceIFrame

Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.)

Jenis: boolean
Default: false
headerColor

Warna bagian header untuk setiap node. Tentukan nilai warna HTML.

Jenis: string
Default: #988f86
headerHeight

Tinggi bagian header untuk setiap node, dalam piksel (dapat bernilai nol).

Nomor jenis
Default: 0
headerHighlightColor

Warna header dari node yang ditunjuk dengan kursor. Tentukan nilai warna HTML atau null; jika null, nilai ini akan headerColor dikurangi sebesar 35%.

Jenis: string
Default: null
highlightOnMouseOver (tidak digunakan lagi untuk v50+)

Tidak digunakan lagi untuk v50+. Untuk v50 dan yang lebih baru, gunakan enableHighlight. Menentukan apakah elemen harus menampilkan efek yang disorot saat kursor diarahkan ke atasnya. Jika ditetapkan ke true, penandaan untuk berbagai elemen dapat ditentukan menggunakan berbagai opsi highlightColor.

Jenis: boolean
Default: false
hintOpacity

Jika maxPostDepth lebih besar dari 1, sehingga node di bawah kedalaman saat ini akan ditampilkan, hintOpacity akan menentukan tingkat transparansinya. Nilainya harus antara 0 dan 1; semakin tinggi nilainya, semakin redup node tersebut.

Jenis: nomor
Default: 0,0
maxColor

Warna untuk persegi panjang dengan nilai kolom 3 maxColorValue. Tentukan nilai warna HTML.

Jenis: string
Default: #00dd00
maxDepth

Jumlah maksimum tingkat node yang akan ditampilkan dalam tampilan saat ini. Level akan diratakan ke bidang saat ini. Jika hierarki Anda memiliki lebih banyak level dari ini, Anda harus naik atau turun untuk melihatnya. Anda juga dapat melihat level maxPostDepth di bawahnya sebagai persegi panjang yang berarsir di dalam node ini.

Jenis: nomor
Default: 1
maxHighlightColor

Warna sorotan yang akan digunakan untuk node dengan nilai terbesar di kolom 3. Tentukan nilai warna HTML atau null; Jika null, nilai ini akan menjadi nilai maxColor yang dikurangi 35%

Jenis: string
Default: null
maxPostDepth

Jumlah level node di luar maxDepth yang akan ditampilkan dengan cara "diisyaratkan". Node yang diberi petunjuk ditampilkan sebagai persegi panjang yang berarsir di dalam node yang berada dalam batas maxDepth.

Jenis: nomor
Default: 0
maxColorValue

Nilai maksimum yang diizinkan di kolom 3. Semua nilai yang lebih besar dari ini akan dipangkas ke nilai ini. Jika ditetapkan ke null, nilai tersebut akan ditetapkan ke nilai maksimum di kolom.

Jenis: nomor
Default: null
midColor

Warna persegi panjang dengan nilai kolom 3 di tengah antara maxColorValue dan minColorValue. Tentukan nilai warna HTML.

Jenis: string
Default: #000000
midHighlightColor

Warna sorotan yang akan digunakan untuk node dengan nilai kolom 3 yang dekat dengan median minColorValue dan maxColorValue. Tentukan nilai warna HTML atau null; jika null, nilai ini akan menjadi nilai midColor yang dikurangi 35%.

Jenis: string
Default: null
minColor

Warna untuk persegi panjang dengan nilai kolom 3 minColorValue. Tentukan nilai warna HTML.

Jenis: string
Default: #dd0000
minHighlightColor

Warna sorotan yang akan digunakan untuk node dengan nilai kolom 3 yang paling dekat dengan minColorValue. Tentukan nilai warna HTML atau null; jika null, nilai ini akan menjadi nilai minColor yang dikurangi 35%

Jenis: string
Default: null
minColorValue

Nilai minimum yang diizinkan di kolom 3. Semua nilai yang kurang dari ini akan dipangkas ke nilai ini. Jika ditetapkan ke null, nilai tersebut akan dihitung sebagai nilai minimum dalam kolom.

Jenis: nomor
Default: null
noColor

Warna yang akan digunakan untuk persegi panjang jika node tidak memiliki nilai untuk kolom 3, dan node tersebut adalah sebuah daun (atau hanya berisi daun). Tentukan nilai warna HTML.

Jenis: string
Default: #000000
noHighlightColor

Warna yang akan digunakan untuk persegi panjang dengan warna "no" saat disorot. Tentukan nilai warna HTML atau null; jika null, ini akan menjadi nilai noColor yang dikurangi 35%.

Jenis: string
Default: null
showScale

Apakah akan menampilkan skala gradien warna dari minColor hingga maxColor di sepanjang bagian atas diagram atau tidak. Tentukan true untuk menampilkan skala.

Jenis: boolean
Default: false
showTooltips

Apakah akan menampilkan tooltip.

Jenis: boolean
Default: benar (true)
textStyle

Objek yang menentukan gaya teks, untuk diagram tertentu yang memiliki teks di area konten seperti peta hierarki. Objek memiliki format ini: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titleTextStyle

Objek yang menetapkan gaya teks judul. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

Apakah akan menggunakan rata-rata tertimbang untuk agregasi.

Jenis: boolean
Default: false

Metode

Metode
draw(data, options)

Menggambar diagram.

Jenis Pengembalian: tidak ada
getEventsConfig() (for v50+)

Menampilkan konfigurasi interaksi saat ini. Link ini dapat digunakan untuk memverifikasi opsi konfigurasi eventsConfig

Jenis Pengembalian: Objek
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

Implementasi getSelection() standar. Elemen yang dipilih adalah node. Hanya satu node yang dapat dipilih pada satu waktu.

Jenis Pengembalian: Array elemen pilihan
setSelection()

Implementasi setSelection() standar. Elemen yang dipilih adalah node. Hanya satu node yang dapat dipilih pada satu waktu.

Jenis Pengembalian: tidak ada
goUpAndDraw()

Naikkan pohon satu level dan gambar ulang. Tidak menampilkan error jika node adalah node root. Fungsi ini diaktifkan secara otomatis saat pengguna mengklik kanan node.

Jenis Pengembalian: tidak ada
getMaxPossibleDepth()

Menampilkan kedalaman maksimum yang memungkinkan untuk tampilan saat ini.

Jenis Pengembalian: nomor
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada

Acara

Lihat eventsConfig untuk pemicu peristiwa yang dapat dikonfigurasi.
Name
onmouseover

Diaktifkan saat pengguna mengarahkan mouse ke node. Pengendali peristiwa diberi indeks baris dari entri yang sesuai dalam tabel data.

Properti: baris
highlight (for v50+)

Diaktifkan saat pengguna menandai node. Pemicu default adalah pengarahan mouse. Pengendali peristiwa dapat dikonfigurasi dengan eventsConfig untuk v50+. Pengendali peristiwa diberi indeks baris dari entri yang sesuai dalam tabel data.

Properti: baris
onmouseout

Diaktifkan saat pengguna mengarahkan mouse dari node. Pengendali peristiwa diberi indeks baris dari entri yang sesuai dalam tabel data.

Properti: baris
unhighlight (for v50+)

Diaktifkan saat pengguna menghapus sorotan node. Pemicu default adalah mouseout. Pengendali peristiwa dapat dikonfigurasi dengan eventsConfig untuk v50+. Pengendali peristiwa diberi indeks baris dari entri yang sesuai dalam tabel data.

Properti: baris
ready

Diaktifkan saat 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.

Properti: Tidak ada
rollup

Diaktifkan saat pengguna kembali ke hierarki. Pemicu default adalah mengklik kanan. Atribut ini dapat dikonfigurasi dengan eventsConfig untuk v50+. Properti baris yang diteruskan ke pengendali peristiwa adalah baris node yang menjadi tujuan navigasi pengguna dari, bukan baris yang dituju oleh pengguna.

Properti: baris
select

Diaktifkan saat pengguna melihat perincian atau memutar node. Juga diaktifkan saat metode setSelection() atau goUpAndDraw() dipanggil. Untuk mengetahui node mana yang dipilih, panggil getSelection().

Properti: tidak ada
drilldown (for v50+)

Diaktifkan saat pengguna membuka hierarki lebih dalam. Pemicu default adalah mengklik. Node ini dapat dikonfigurasi dengan eventsConfig untuk v50+. Untuk mempelajari node mana yang diklik, panggil getSelection().

Properti: tidak ada

Kebijakan Data

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