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

最新推荐文章于 2023-03-29 14:06:40 发布

爱睡懒觉的老舅

最新推荐文章于 2023-03-29 14:06:40 发布

阅读量1.4k

点赞数 1

分类专栏： HighCharts 可视化文章标签： HighCharts 可视化

本文链接：https://blog.csdn.net/ocean111best/article/details/104488687

版权

可视化同时被 2 个专栏收录

16 篇文章 4 订阅

订阅专栏

HighCharts

1 篇文章 0 订阅

订阅专栏

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

爱睡懒觉的老舅

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
可视化例子(10)——HighCharts三维堆叠柱状图

由于工作的需要接触 HighCharts 的使用。做出了个三维堆叠柱状图，得出的效果图如下图所示：其主要代码如下：<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...
复制链接

扫一扫