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 pohon data, tempat setiap node dapat memiliki nol atau beberapa turunan, dan satu induk (kecuali untuk root, yang tidak memiliki induk). Setiap node ditampilkan sebagai persegi panjang, dengan ukuran dan warna sesuai dengan nilai yang Anda tetapkan. Ukuran dan warna bernilai relatif terhadap semua node lainnya dalam grafik. Anda dapat menentukan jumlah level yang akan ditampilkan secara bersamaan, dan secara opsional untuk menampilkan level yang lebih dalam dengan petunjuk. Jika node adalah node daun, Anda dapat menentukan ukuran dan warna; jika bukan node daun, node tersebut akan ditampilkan sebagai kotak pembatas untuk node daun. Perilaku defaultnya adalah menggerakkan pohon ke bawah saat pengguna mengklik kiri node, dan berpindah ke atas pohon ketika pengguna mengklik kanan grafik.

Ukuran total grafik ditentukan oleh ukuran elemen di dalamnya yang Anda sisipkan di halaman. Jika Anda memiliki node daun dengan nama yang terlalu panjang untuk ditampilkan, nama akan terpotong 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 tertentu untuk elemen tertentu yang akan digunakan saat ini terjadi. Untuk mengaktifkan penyorotan, tetapkan highlightOnMouseOver:true (untuk v49 atau sebelumnya) atau enableHighlight: true (untuk v50+). Dari sana, Anda dapat menyetel warna untuk menggunakan penyorotan 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'],
        }
      };

Tooltip

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

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

Pada diagram di atas, kita menentukan fungsi yang disebut showStaticTooltip yang hanya menampilkan string dengan HTML yang akan ditampilkan setiap kali pengguna mengarahkan kursor ke sel peta hierarki. Cobalah! Kode untuk menghasilkannya 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 menginginkan tooltip yang bervariasi berdasarkan nilai data. Contoh berikut menunjukkan cara mengakses setiap kolom dalam data.

Jika mengarahkan kursor ke sel dalam peta hierarki di atas, Anda akan melihat tooltip yang berbeda untuk setiap sel. Fungsi tooltip peta pohon semuanya 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

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

  • Baris 1 menunjukkan baris yang sesuai dari tabel, sehingga menggunakan data.getValue secara bebas.
  • Baris 2 memberi tahu Anda baris yang 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 dalam tabel. Ini adalah 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 visualisasinya 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 diukur dan diberi warna sesuai dengan nilainya dibandingkan dengan node lain yang saat ini ditampilkan.

Tabel data harus memiliki empat kolom dalam format berikut:

  • Kolom 0 - [string] ID untuk node ini. Ini dapat berupa string JavaScript apa pun yang valid, termasuk spasi, dan panjang apa pun yang dapat ditampung string. Nilai ini ditampilkan sebagai header node.
  • Kolom 1 - [string] - ID node induk. Jika ini adalah node root, kosongkan kolom ini. 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 relatif terhadap semua node lain yang saat ini ditampilkan. Untuk node yang tidak berdaun, nilai ini diabaikan dan dihitung dari ukuran semua turunannya.
  • Kolom 3 - [opsional, number] - Nilai opsional yang digunakan untuk menghitung warna untuk node ini. Semua nilai, positif atau negatif, diizinkan. Nilai warna pertama-tama 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 menampilkan efek yang ditandai. Pemicu default adalah saat mouse diarahkan ke atas. Pemicu dapat dikonfigurasi dengan eventsConfig. Jika ditetapkan ke true, sorotan untuk elemen yang berbeda dapat ditentukan menggunakan berbagai opsi highlightColor.

Jenis: boolean
Default: false (salah)
eventConfig (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, default akan digunakan.
Jika konfigurasi berupa array kosong, interaksi akan dinonaktifkan.
Untuk konfigurasi yang valid, mouse_event diperlukan dan harus merupakan peristiwa mouse yang didukung. Kemudian, Anda dapat memiliki hingga empat pengubah kunci opsional.
Interaksi yang didukung:
menyorot, membatalkan sorotan, properti gabungan, lihat perincian.
Peristiwa mouse yang didukung:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. Dengan 'contextmenu' berarti klik kanan.
Kunci pengubah peristiwa mouse yang didukung:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
Dapatkan konfigurasi saat ini:
Metode panggilan getEventsConfig().
Contoh penggunaan Control+Shift+Right_Click untuk naik hierarki:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Objek Type:
Default: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
warnaFont

Warna teks. Tentukan nilai warna HTML.

Jenis: string
Default: #ffffff
jenis font

Jenis font yang akan digunakan untuk semua teks.

Jenis: string
Default: otomatis
ukuranFont

Ukuran font untuk semua teks, dalam titik.

Jenis: angka
Default: 12
forceIFrame

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

Jenis: boolean
Default: false (salah)
WarnaHeader

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

Jenis: string
Default: #988f86
tinggi header

Ketinggian bagian header untuk setiap node, dalam piksel (bisa nol).

Nomor Jenis
Default: 0
headerHighlightColor

Warna header node mengarahkan kursor. Tentukan nilai warna HTML atau null; jika null, nilai ini akan headerColor diringankan 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 akan menampilkan efek yang ditandai saat mouse diarahkan ke atas. Jika ditetapkan ke true, sorotan untuk elemen yang berbeda dapat ditentukan menggunakan berbagai opsi highlightColor.

Jenis: boolean
Default: false (salah)
hintOpacity

Jika maxPostDepth lebih besar dari 1, menyebabkan node di bawah kedalaman saat ini ditampilkan, hintOpacity akan menentukan seberapa transparan seharusnya node tersebut ditampilkan. Harus antara 0 dan 1. Semakin tinggi nilainya, semakin rendah node.

Jenis: angka
Default: 0,0
maxColor

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

Jenis: string
Default: #00dd00
maxDepth

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

Jenis: angka
Default: 1
maxHighlightColor

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

Jenis: string
Default: null
maxPostDepth

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

Jenis: angka
Default: 0
maxColorValue

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

Jenis: angka
Default: null
warna tengah

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

Jenis: string
Default: #000000
midHighlightColor

Warna sorotan yang digunakan untuk node dengan nilai kolom 3 di dekat median minColorValue dan maxColorValue. Tentukan nilai warna HTML atau null; jika null, nilai ini akan menjadi nilai midColor yang diringankan sebesar 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 digunakan untuk node dengan nilai kolom 3 yang terdekat dengan minColorValue. Tentukan nilai warna HTML atau null; jika null, nilai ini akan menjadi nilai minColor yang diringankan sebesar 35%

Jenis: string
Default: null
minColorValue

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

Jenis: angka
Default: null
tanpawarna

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

Jenis: string
Default: #000000
noHighlightColor

Warna yang digunakan untuk persegi panjang warna "tidak" saat ditandai. Tentukan nilai warna HTML atau null; jika null, ini akan menjadi nilai noColor yang diringankan sebesar 35%.

Jenis: string
Default: null
showScale

Apakah akan menampilkan skala gradien warna dari minColor ke maxColor di sepanjang bagian atas diagram. Tentukan true untuk menampilkan timbangan.

Jenis: boolean
Default: false (salah)
showTooltips

Apakah tooltip ditampilkan atau tidak.

Jenis: boolean
Default: true (benar):
gayaTeks

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.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
judul

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titleTextStyle

Objek yang menentukan 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.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAgregasi

Apakah akan menggunakan rata-rata tertimbang untuk agregasi.

Jenis: boolean
Default: false (salah)

Metode

Metode
draw(data, options)

Menggambar diagram.

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

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

Jenis Hasil: 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 dalam satu waktu.

Jenis Hasil: Array elemen pilihan
setSelection()

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

Jenis Hasil: tidak ada
goUpAndDraw()

Pindahkan pohon ke atas sebesar satu tingkat dan gambar ulang. Tidak melemparkan error jika node tersebut adalah node root. Metode ini diaktifkan secara otomatis saat pengguna mengklik kanan node.

Jenis Hasil: tidak ada
getMaxPossibleDepth()

Menampilkan kedalaman maksimum yang memungkinkan untuk tampilan saat ini.

Jenis Hasil: angka
clearChart()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: tidak ada

Acara

Lihat eventsConfig untuk pemicu peristiwa yang dapat dikonfigurasi.
Name
onmouseover

Dipicu jika pengguna mengarahkan mouse ke node. Pengendali peristiwa diteruskan indeks baris untuk entri yang sesuai di tabel data.

Properti: baris
highlight (for v50+)

Dipicu jika pengguna menandai node. Pemicu default adalah pengarahan mouse. Ini dapat dikonfigurasi dengan eventsConfig untuk v50+. Pengendali peristiwa diteruskan indeks baris untuk entri yang sesuai di tabel data.

Properti: baris
onmouseout

Dipicu saat pengguna mengarahkan mouse ke luar node. Pengendali peristiwa diteruskan indeks baris untuk entri yang sesuai di tabel data.

Properti: baris
unhighlight (for v50+)

Dipicu jika pengguna menghapus sorotan node. Pemicu default adalah mouseout. Ini dapat dikonfigurasi dengan eventsConfig untuk v50+. Pengendali peristiwa diteruskan indeks baris untuk entri yang sesuai di 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

Dipicu jika pengguna membuka kembali hierarki. Pemicu default adalah mengklik kanan. Library ini dapat dikonfigurasi dengan eventsConfig untuk v50+. Properti baris yang diteruskan ke pengendali peristiwa adalah baris node tempat pengguna melakukan navigasi dari, bukan baris yang dinavigasikan pengguna.

Properti: baris
select

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

Properti: tidak ada
drilldown (for v50+)

Dipicu jika pengguna menavigasi lebih dalam ke hierarki. Pemicu default adalah mengklik. Class 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.