Pohon Highcharts (Treemap)
bab ini kita akan memperkenalkan peta panas Highcharts.
Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi Highcharts. Mari kita lihat konfigurasi Highcharts lainnya.
pohon
konfigurasi seri
Jenis atribut diatur seri treemap, kolom series.type menggambarkan jenis data. Nilai default adalah "line".
var chart = { type: 'treemap' };
contoh
File name: highcharts_tree_map.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/treemap.js"></script> <script src="http://code.highcharts.com/modules/heatmap.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var title = { text: 'Highcharts Treemap' }; var colorAxis = { minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }; var series= [{ type: "treemap", layoutAlgorithm: 'squarified', data: [{ name: 'A', value: 6, colorValue: 1 }, { name: 'B', value: 6, colorValue: 2 }, { name: 'C', value: 4, colorValue: 3 }, { name: 'D', value: 3, colorValue: 4 }, { name: 'E', value: 2, colorValue: 5 }, { name: 'F', value: 2, colorValue: 6 }, { name: 'G', value: 1, colorValue: 7 }] }]; var json = {}; json.title = title; json.colorAxis = colorAxis; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Contoh di atas output:
berbagai tingkat pohon
Contoh berikut ini menggunakan warna yang berbeda untuk mengidentifikasi berbagai tingkat pohon.
contoh
File name: highcharts_tree_levels.htm (sumber penuh contoh kode, silakan klik untuk melihat)
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/treemap.js"></script> <script src="http://code.highcharts.com/modules/heatmap.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var title = { text: 'Fruit consumption' }; var series = [{ type: "treemap", layoutAlgorithm: 'stripes', alternateStartingDirection: true, levels: [{ level: 1, layoutAlgorithm: 'sliceAndDice', dataLabels: { enabled: true, align: 'left', verticalAlign: 'top', style: { fontSize: '15px', fontWeight: 'bold' } } }], data: [{ id: 'A', name: 'Apples', color: "#EC2500" }, { id:'B', name: 'Bananas', color: "#ECE100" }, { id: 'O', name: 'Oranges', color: '#EC9800' }, { name: 'Anne', parent: 'A', value: 5 }, { name: 'Rick', parent: 'A', value: 3 }, { name: 'Peter', parent: 'A', value: 4 }, { name: 'Anne', parent: 'B', value: 4 }, { name: 'Rick', parent: 'B', value: 10 }, { name: 'Peter', parent: 'B', value: 1 }, { name: 'Anne', parent: 'O', value: 1 }, { name: 'Rick', parent: 'O', value: 3 }, { name: 'Peter', parent: 'O', value: 3 }, { name: 'Susanne', parent: 'Kiwi', value: 2, color: '#9EDE00' }] }]; var json = {}; json.title = title; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Contoh di atas output:
Sejumlah besar pohon Data
Contoh berikut warna sejumlah besar pohon data, contoh-contoh spesifik dari data yang tersedia dengan mengklik "mencoba" untuk melihat.
File name: highcharts_tree_largemap.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/treemap.js"></script> <script src="http://code.highcharts.com/modules/heatmap.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { //省略部分 js 代码 var data = {……}; var points = [], region_p, region_val, region_i, country_p, country_i, cause_p, cause_i, cause_name = []; cause_name['Communicable & other Group I'] = 'Communicable diseases'; cause_name['Noncommunicable diseases'] = 'Non-communicable diseases'; cause_name['Injuries'] = 'Injuries'; region_i = 0; for (var region in data) { region_val = 0; region_p = { id: "id_" + region_i, name: region, color: Highcharts.getOptions().colors[region_i] }; country_i = 0; for (var country in data[region]) { country_p = { id: region_p.id + "_" + country_i, name: country, parent: region_p.id }; points.push(country_p); cause_i = 0; for (var cause in data[region][country]) { cause_p = { id: country_p.id + "_" + cause_i, name: cause_name[cause], parent: country_p.id, value: Math.round(+data[region][country][cause]) }; region_val += cause_p.value; points.push(cause_p); cause_i++; } country_i++; } region_p.value = Math.round(region_val / country_i); points.push(region_p); region_i++; } var chart = { renderTo: 'container' }; var title = { text: 'Global Mortality Rate 2012, per 100 000 population' }; var subtitle: { text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.' }; var series = [{ type: "treemap", layoutAlgorithm: 'squarified', allowDrillToNode: true, dataLabels: { enabled: false }, levelIsConstant: false, levels: [{ level: 1, dataLabels: { enabled: true }, borderWidth: 3 }], data: points }]; var json = {}; json.title = title; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Contoh di atas output: