免費(fèi)AI編程助手
Highcharts 樹(shù)狀圖(Treemap)
2018-09-16 21:06 更新
Highcharts 樹(shù)狀圖(Treemap)
本章節(jié)我們將為大家介紹 Highcharts 的熱點(diǎn)圖。
我們?cè)谇懊娴恼鹿?jié)已經(jīng)了解了 Highcharts 配置語(yǔ)法。接下來(lái)讓我們來(lái)看下 Highcharts 的其他配置。
樹(shù)狀圖
series 配置
設(shè)置 series 的 type 屬性為 treemap ，series.type 描述了數(shù)據(jù)列類(lèi)型。默認(rèn)值為 "line"。
var chart = {
type: 'treemap'
};
實(shí)例
文件名：highcharts_tree_map.htm
<html>
<head>
<title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="/try/demo_source/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://code.highcharts.com/modules/heatmap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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>
以上實(shí)例輸出結(jié)果為：
不同等級(jí)樹(shù)狀圖
以下實(shí)例使用不同顏色來(lái)標(biāo)識(shí)不同等級(jí)的樹(shù)狀圖。
實(shí)例
文件名：highcharts_tree_levels.htm（完整源碼請(qǐng)點(diǎn)擊實(shí)例查看）
<html>
<head>
<title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="/try/demo_source/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://code.highcharts.com/modules/heatmap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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>
以上實(shí)例輸出結(jié)果為：
大數(shù)據(jù)量樹(shù)狀圖
以下實(shí)例顏色了大數(shù)據(jù)量的樹(shù)狀圖，具體實(shí)例數(shù)據(jù)可通過(guò)點(diǎn)擊"嘗試一下"查看。
文件名：highcharts_tree_largemap.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="/try/demo_source/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://code.highcharts.com/modules/heatmap.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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 rel="external nofollow" target="_blank" >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>
以上實(shí)例輸出結(jié)果為：
以上內(nèi)容是否對(duì)您有幫助：
更多建議：