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 datasize: jumlah nilai (kolom 3) dari sel ini dan semua turunannyavalue: 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.getValuesecara 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
minColorValuehinggamaxColorValue, lalu node diberi warna dari gradien antaraminColordanmaxColor.
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 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.
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 Jenis: string
Default: null
|
| highlightOnMouseOver (tidak digunakan lagi untuk v50+) |
Tidak digunakan lagi untuk v50+. Untuk v50 dan yang lebih baru, gunakan Jenis: boolean
Default: false
|
| hintOpacity |
Jika Jenis: nomor
Default: 0,0
|
| maxColor |
Warna untuk persegi panjang dengan nilai kolom 3 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 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 Jenis: string
Default: null
|
| maxPostDepth |
Jumlah level node di luar 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 Jenis: string
Default: #000000
|
| midHighlightColor |
Warna sorotan yang akan digunakan untuk node dengan nilai kolom 3 yang dekat dengan median Jenis: string
Default: null
|
| minColor |
Warna untuk persegi panjang dengan nilai kolom 3 Jenis: string
Default: #dd0000
|
| minHighlightColor |
Warna sorotan yang akan digunakan untuk node dengan nilai kolom 3 yang paling dekat dengan
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 Jenis: string
Default: null
|
| showScale |
Apakah akan menampilkan skala gradien warna dari 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> }
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> }
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 Jenis Pengembalian: Objek
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implementasi
Jenis Pengembalian: Array elemen pilihan
|
setSelection() |
Implementasi
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
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 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 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 Properti: Tidak ada
|
rollup |
Diaktifkan saat pengguna kembali ke hierarki. Pemicu default adalah mengklik kanan.
Atribut ini dapat dikonfigurasi dengan Properti: baris
|
select |
Diaktifkan saat pengguna melihat perincian atau memutar node. Juga diaktifkan saat metode
Properti: tidak ada
|
drilldown (for v50+) |
Diaktifkan saat pengguna membuka hierarki lebih dalam. Pemicu default adalah mengklik.
Node ini dapat dikonfigurasi dengan Properti: tidak ada
|
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.