May 09, 2021 Highcharts
In this section, we'll introduce you to Highcharts' hotspots.
We've already learned about the Highcharts configuration syntax in the previous sections. Let's look at the other configurations of Highcharts.
Set the type property of the series to treemap, and the series.type describes the data column type. T he default is line.
var chart = {
type: 'treemap'
};
File name: 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>
The output of the above examples is:
The following example uses different colors to identify different levels of tree charts.
File name: highcharts_tree_levels.htm (full source code please click on the instance to view)
<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>
The output of the above examples is:
The following examples color a tree map of the amount of big data, which can be viewed by clicking "Try it".
File name: 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 href="http://apps.who.int/gho/data/node.main.12?lang=en" 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>
The output of the above examples is: