【 D3.js 高级系列 — 3.0 】堆栈图

最新推荐文章于 2022-12-22 00:40:29 发布

DecemberCafe

最新推荐文章于 2022-12-22 00:40:29 发布

阅读量1w

点赞数 3

分类专栏： D3.js D3 数据可视化 - 高级系列文章标签： d3.js stack layout 布局堆栈图

本文链接：https://blog.csdn.net/lzhlzz/article/details/44728981

版权

本文详细介绍了如何使用D3.js实现堆栈图，包括数据处理、堆栈布局的运用及坐标轴、颜色标签的设置，展示了从数据到可视化的完整过程。堆栈图适用于展示不同类别数据的叠加关系，文中通过实例解释了如何为堆栈图添加颜色标签，以便清晰地标识各个数据层的含义。

摘要由CSDN通过智能技术生成

堆栈图布局（Stack Layout）能够计算二维数组每一数据层的基线，以方便将各数据层叠加起来。本文讲解堆栈图的制作方法。

先说说什么是堆栈图。

例如，有如下情况：

某公司，销售三种产品：个人电脑、智能手机、软件。

2005年，三种产品的利润分别为3000、2000、1100万。

2006年，三种产品的利润分别为1300、4000、1700万。

计算可得，2005年总利润为6100万，2006年为7000万。

如果要将2005年的利润用柱形表示，那么应该画三个矩形，三个矩形堆叠在一起。这时候就有一个问题：每一个矩形的起始y坐标是多少，高应该是多少。

输入数组，直接计算出上述问题的，就是堆栈图布局。

1. 数据

某公司销售个人电脑、智能手机、软件的数据如下：

var dataset = [
{ name: "PC" , 
		  sales: [	{ year:2005, profit: 3000 },
					{ year:2006, profit: 1300 },
					{ year:2007, profit: 3700 },
					{ year:2008, profit: 4900 },
					{ year:2009, profit: 700 }] },
		{ name: "SmartPhone" , 
		  sales: [	{ year:2005, profit: 2000 },
					{ year:2006, profit: 4000 },
					{ year:2007, profit: 1810 },
					{ year:2008, profit: 6540 },
					{ year:2009, profit: 2820 }] },
		{ name: "Software" , 
		  sales: [	{ year:2005, profit: 1100 },
					{ year:2006, profit: 1700 },
					{ year:2007, profit: 1680 },
					{ year:2008, profit: 4000 },
					{ year:2009, profit: 4900 }] }
    ];

dataset是一个数组，数组的每一项是一个对象，对象里含有name和sales。name是产品名、sales是销售情况。sales也是一个数组，每一项也是对象，对象里包含有year表示年份、profit表示利润。