Highcharts 樹狀圖(Treemap)
我們將為大家介紹 Highcharts 的熱點圖。
我們在前面已經了解了 Highcharts 配置語法。接下來讓我們來看下 Highcharts 的其他配置。
樹狀圖
series 配置
設置 series 的 type 屬性為 treemap ，series.type 描述了數據列類型。默認值為 "line"。
var chart = { type: "treemap" };
實例
文件名：highcharts_tree_map.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鳥教程(runoob.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" stylex="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>
不同等級樹狀圖
以下實例使用不同顏色來標識不同等級的樹狀圖。
實例
文件名：highcharts_tree_levels.htm（完整源碼請點擊實例查看）
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鳥教程(runoob.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" stylex="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>
大數據量樹狀圖
以下實例顏色了大數據量的樹狀圖，具體實例數據可通過點擊"嘗試一下"查看。
文件名：highcharts_tree_largemap.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鳥教程(runoob.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" stylex="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>
TAG:程序員小新人學習 |