可视化例子(10)——HighCharts三维堆叠柱状图

由于工作的需要接触 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 进行搭配，该颜色搭配方案很漂亮，如下图所示

可视化例子(10)——HighCharts三维堆叠柱状图相关推荐

Matlab进阶绘图第4期—三维堆叠柱状图/三维堆积图
三维堆叠柱状图是堆叠图(见Matlab论文插图绘制模板第6期)在三维空间的拓展. 三维堆叠柱状图不仅可以直观地展示各部分总数的对比,还能够看出各部分在总数中所占的比例,从而使数据更加形像. 当然,三维 ...
可视化图表之奥妙——百分比堆叠柱状图
百分比堆叠柱状图是属于堆叠柱状图的一种,是指将每个柱子进行分割以显示相同类型下各个数据的占比大小情况.百分比堆叠柱形图上柱子的各个层代表的是该类别数据占该分组总体数据的百分比,但不适用于对比不同分组内 ...
可视化例子(3)——geo3D-bar3D(3D地图柱状图)
一.效果图二.数据格式数据以"[[经度,纬度,柱子高度],[经度,纬度,柱子高度],[经度,纬度,柱子高度]...]"这样的形式存储在Json文件中,通过Filter函数存储到 ...
echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
pyecharts数据可视化—柱状图、不堆叠柱状图、仪表盘
①绘制柱状图: from pyecharts.charts import Bar from pyecharts import options as optsv1 = [70, 85, 95, 64] ...
绘制3D Echarts地图饼图堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？（附代码）
来源:大数据DT(ID:hzdashuju) 作者:屈希峰,资深Python工程师,知乎多个专栏作者本文约8000字,建议阅读20分钟柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上 ...
柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？
导读:柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上看到它.它有哪些分类?可以展示哪些数据关系?怎样用Python绘制?本文带你逐一了解. 作者:屈希峰,资深Python工程师,知乎多 ...
Python-Matplotlib可视化（10）——一文详解3D统计图的绘制
Python-Matplotlib可视化(10)--一文详解3D统计图的绘制前言 3D散点图 3D曲线图 3D标量场绘制3D曲面在3D坐标轴中绘制2D图形 3D柱形图系列链接前言 Matpl ...

可视化例子(10)——HighCharts三维堆叠柱状图

可视化例子(10)——HighCharts三维堆叠柱状图相关推荐

最新文章

热门文章