由于工作的需要接触 HighCharts 的使用。做出了个三维堆叠柱状图,得出的效果图如下图所示:
其主要代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>广州市各个区每日XX人数三维堆叠柱状图/title>
<style type="text/css">
#container {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/highcharts-3d.js"></script>
<script src="../../code/themes/gray.js"></script>
<div id="container" style="height: 450px"></div>
<script type="text/javascript">
var times = ['1/27','1/28','1/29','1/30','1/31','2/1','2/2',
'2/3','2/4','2/5','2/6','2/7','2/8','2/9']
//白云区
data01 = [13,16,17,27,35,45,49,53,58,61,65,66,68,69]
//海珠区
data02 = [8,10,11,15,20,24,26,32,37,44,47,54,57,60]
//天河区
data03 = [13,17,22,22,26,33,34,36,36,37,39,40,40,42]
//越秀区
data04 = [5,5,6,11,16,17,17,26,27,29,33,34,34,34]
//番禺区
data05 = [5,5,7,11,14,16,18,20,25,25,31,33,34,34]
//增城区
data06 = [0,0,1,1,5,7,9,11,12,13,17,17,17,17]
//荔湾区
data07 = [1,1,1,1,2,5,6,6,8,12,15,16,16,17]
//花都区
data08 = [1,2,2,5,5,9,11,12,12,12,14,15,15,15]
//黄浦区
data09 = [5,6,9,9,9,11,11,11,13,13,14,14,14,16]
//南沙区
data10 = [0,1,3,3,4,7,7,8,8,8,8,8,8,8]
//从化区
data11 = [0,0,0,1,1,1,1,1,1,1,1,1,1,1]
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 16,
beta: 5,
viewDistance: 25,
depth: 50
}
},
//柱子颜色 ---RdYlBu最好看
colors: ["rgb(165, 0, 38)", "rgb(215, 48, 39)", "rgb(244,109, 67)", "rgb(253,174, 97)", "rgb(254,224,144)", "rgb(255,255,191)", "rgb(224,243,248)", "rgb(171,217,233)", "rgb(116,173,209)", "rgb( 69,117,180)", "rgb( 49, 54,149)"],
//图例
legend: {
align: 'center'
},
title: {
text: '广州市各个区每日人数变化堆叠图'
},
xAxis: {
categories: times //日期
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '人数'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
pointWidth: 25, //柱子宽度
minPointLength: 2, //设置柱子最低高度
depth: 80 //纵深
}
},
series: [
{
name: '从化区',
data: data11,
stack: 'female' //stack要一样才能是堆叠图
},{
name: '南沙区',
data: data10,
stack: 'female'
} , {
name: '黄浦区',
data: data09,
stack: 'female'
} , {
name: '花都区',
data: data08,
stack: 'female'
}, {
name: '荔湾区',
data: data07,
stack: 'female'
}, {
name: '增城区',
data: data06,
stack: 'female'
}, {
name: '番禺区',
data: data05,
stack: 'female'
}, {
name: '越秀区',
data: data04,
stack: 'female'
}, {
name: '天河区',
data: data03,
stack: 'female'
}, {
name: '海珠区',
data: data02,
stack: 'female'
},{
name: '白云区',
data: data01,
stack: 'female'
}
]
});
</script>
</body>
</html>
其中使用了开源颜色库 ColorBrewer.jl 进行搭配,该颜色搭配方案很漂亮,如下图所示