本章节我们将为大家介绍 Highcharts 的热点图。
我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。
设置 series 的 type 属性为 treemap ，series.type 描述了数据列类型。默认值为 "line"。
var chart = {
type: "treemap"
};
文件名：highcharts_tree_map.htm
<html>
<head>
<title>Highcharts 教程 | 教程(.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>
以上实例输出结果为：
以下实例使用不同颜色来标识不同等级的树状图。
文件名：highcharts_tree_levels.htm（完整源码请点击实例查看）
<html>
<head>
<title>Highcharts 教程 | 教程(.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>
以上实例输出结果为：
以下实例颜色了大数据量的树状图，具体实例数据可通过点击"尝试一下"查看。
文件名：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>
以上实例输出结果为：
Angular模板现在是时候用AngularJS制作动态网页了。我们将添加一个测试，验证用于控制器的代码，我们将添加这个控制器。为应用程...
事件处理函数在这一步中，你将添加一个可点击的手机图像交换器，指向手机详情页面。手机详情视图显示了当前手机的一张大图像以及...
使用命令在一个 Vue CLI 项目中，@vue/cli-service安装了一个名为vue-cli-service的命令。你可以在 npm scripts 中以vue-cli-ser...
描述@for指令使用关键字，指定从start值到end值之前的值的范围。语句@for $var from start to end下面简要解释语法。$var: 它表...
描述LESS中的颜色定义函数使定义和操作颜色变得超级简单，使用颜色函数可以帮助你控制颜色、更好地配色。LESS提供了许多有用的颜...