<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/highcharts.js"></script>
<script src="./js/heatmap.js"></script>
<script src="./js/treemap.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$('#container').highcharts({
plotOptions:{
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.open(this.options.url);
}
}
}
}
},
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: 'apple',
color: "#EC2500",
url:"http://www.baidu.com"
}, {
id: 'B',
name: 'banana',
color: "#ECE100",
url:"http://www.comjia.com"
}, {
id: 'O',
name: 'orange',
color: '#EC9800',
url:"http://www.renren.com"
}, {
name: 'Xiao Zhang',
parent: 'A',
value: 5,
url:"http://www.qq.com"
}, {
name: 'Xiao Peng',
parent: 'A',
value: 3,
url:"http://www.163.com"
}, {
name: 'Xiao Pan',
parent: 'A',
value: 4,
url:"http://www.sohu.com"
}, {
name: 'Banana 1',
parent: 'B',
value: 4,
url:"http://www.360.cn"
}, {
name: 'Banana 2',
parent: 'B',
value: 10,
url:"http://www.google.com"
}, {
name: 'Banana 3',
parent: 'B',
value: 1,
url:"http://www.mi.com"
}, {
name: 'Xiao Zhang',
parent: 'O',
value: 1,
url:"http://www.mop.com"
}, {
name: 'Xiao Peng',
parent: 'O',
value: 3,
url:"http://www.tianya.cn"
}, {
name: 'Xiao Pan',
parent: 'O',
value: 3,
url:"http://www.taobao.com"
}, {
name: 'Aso',
parent: 'wiki',
value: 2,
color: '#9EDE00',
url:"http://www.jd.com"
}]
}],
title: {
text: 'Fruit consumption'
}
});
</script>
</body>
</html>
Running renderings:
Each statistic item in the figure has a different hyperlink, and the same big statistic item banana and the three small statistic items below also have different hyperlinks.