页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

目录

1 概述

1.1 应用场景

对比柱图也被称为脊柱图、对比条形图,是一种以背靠背形式的条形图,主要用于在同维度下,对比分析两个指标的数据,便于更直观地看出对比差距下图是对比分析各地区男性和女性人口分布情况:

Image Removed

1.2 配图建议

...

1.3 图表特点

...

优势

...

1、清晰地比较出同维度下不同指标的数据差距,常用于具有相反含义的两个指标做对比;

2、两个指标在不同的区域中绘制数据,互不干扰,数据对比更清晰直观。

...

2 示例

...

1 概述

柱图能够直观地看出各组数据间的差异性,可对数据进行比较、展示和排序。以下将分别举例介绍柱图、堆积柱图、横条图、堆积横条图、对比柱图、极坐标柱图、极坐标堆积柱图、瀑布图和分区柱图九种图的画法。

柱图
柱图
2 柱图

2.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段。

2.2 图形特点

优势:肉眼就能清楚的看出数量的多少及比较出数据之间的差别

劣势:只适用中小规模的数据集(即不适合项数较多的数据)且不适合表示趋势。

2.3 业务场景一

1、场景描述:某大型零售公司,想要分析全国各区域的销售总额对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加柱图组件,在数据选择区中,勾选“发货区域”和“销售额”字段,由系统自动分配到“X轴”和“Y轴”上;或拖拽“发货区域”字段到“X轴”,“销售额”字段到“Y轴”。

Image Added

(2)在组件设置的属性面板中,设置 同系列 的柱间距为60,即可得到场景中所需图形效果,如下图所示:

Image Added

2.4 业务场景二

1、场景描述:某大型零售公司,想要分析全国各区域2020年和2021年的销售总额对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加柱图组件,在数据选择区中,勾选“发货区域”、“订单年份”和“销售额”字段,由系统自动分配到“X轴”、“颜色”和“Y轴”上;或拖拽“发货区域”字段到“X轴”,“订单年份”到“颜色”,“销售额”字段到“Y轴”。

(2)在组件设置的属性面板中,选择堆积效果为 不堆积,即可得到场景中所需图形效果,如下图所示:

Image Added

堆积柱图
堆积柱图
3 堆积柱图

堆积柱图将每个柱子进行分割以显示大类别下各个子类别的大小情况适用于比较每个大类别的数据总量,以及反映各个子类别的大小。

3.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段;

颜色:一个维度。

3.2 图形特点

优势:清晰地比较每个大类别的数据总量差距,以及比较同个大类别下各个子类别的大小

劣势:只适用于维度数不多的情况。

3.3 业务场景

1、场景描述:某大型零售公司,想要分析各产品类别在2020和2021销售量的对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加堆积柱图组件,在数据选择区中,勾选“产品类别”、“订单年份”和“销售量”字段,由系统自动分配到“X轴”、“颜色”和“Y轴”上;或拖拽“产品类别”字段到“X轴”,“订单年份”字段到“颜色”,“销售量”字段到“Y轴”。

(2)在组件设置的标记区中,设置 显示标签 ,即可得到场景中所需图形效果,如下图所示:

Image Added

横条图
横条图
4 横条图

横条图是柱图的横向表现形式,又称横向柱图,用若干个细长的横条长度来表达各类数量大小的图形。

4.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段;

4.2 图形特点

优势:显示单个分类项目间的比较情况。这类横条图是最常用的图形之一。

劣势:只适用于维度数不多的情况。

4.3 业务场景

1、场景描述:某大型零售公司,想要降序查看全国各区域的销售总额对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加横条图组件,在数据选择区中,勾选“发货区域”和“销售额”字段,由系统自动分配到“X轴”、“Y轴”上;或拖拽“发货区域”字段到“Y轴”,“销售额”字段到“X轴”。

(2)在 销售额 字段点击Image Added,在更多菜单中选择 排序方式>降序 ,即可得到场景中所需图形效果,如下图所示:

Image Added

堆积横条图
堆积横条图
5 堆积横条图

通过将每个横条进行分割,实现一个大分类包含的每个小分类,用以显示相同类型下各个数据的大小情况,适用于比较每个大类别的数据总量,以及反映各个子类别的大小。

5.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段;

颜色:一个维度。

5.2 图形特点

优势:清晰地比较每个大类别的数据总量差距,以及比较同个大类别下各个子类别的大小

劣势:只适用于维度数不多的情况。

4.3 业务场景

1、场景描述:某大型零售公司,想要分析各发货区域在2020和2021销售量的对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加堆积横条图组件,在数据选择区中,勾选“发货区域”、“订单年份”和“销售量”字段,由系统自动分配到“X轴”、“颜色”和“Y轴”上;或拖拽“发货区域”字段到“Y轴”,“订单年份”字段到“颜色”,“销售量”字段到“X轴”。

(2)在组件设置的标记区中,设置 显示标签 ,即可得到场景中所需图形效果,如下图所示:

Image Added

对比柱图
对比柱图
6 对比柱图

对比柱图也被称为脊柱图、对比条形图,是一种以背靠背形式的条形图,主要用于在同维度下,对比分析两个指标的数据,便于更直观地看出对比差距

6.1 配图建议

X轴:两个度量字段

Y轴:一个维度字段

6.2 图形特点

优势:

1、清晰地比较出同维度下不同指标的数据差距,常用于具有相反含义的两个指标做对比;

2、两个指标在不同的区域中绘制数据,互不干扰,数据对比更清晰直观。

劣势:不适用于多组数据间的比较。

6.3 业务场景

1、场景描述:查看某大型零售公司各产品类别的销售量、销售额情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加对比柱图组件,在数据选择区中,勾选“产品类别”、“销售量”和“销售额”字段,由系统自动分配到“X轴”、“Y轴”;或拖拽“产品类别”字段到“X轴”,“销售量”、“销售额”字段到“Y轴”。

Image Added

(2)在Y轴“销售量”字段的更多中,选择排序方式为“升序”。

Image Added

(3)在标记区分别设置“销售量”、“销售额”柱图显示的颜色。

Image Added

(4)在组件设置的属性中,设置轴位置为 左 ,即可得到场景中所需图形效果,如下图所示:

Image Added

瀑布图
瀑布图
7 瀑布图

瀑布图因形似瀑布流水而被称之为瀑布图(Waterfall Plot)。瀑布图采用绝对值与相对值结合的方式,来表达数个特定数值之间的数量变化关系。实现在反映数据多少的同时,直观反映出数据的增减变化过程。

7.1 配图建议

X轴:一个维度字段

Y轴:一个度量字段

7.2 图形特点

优势:展示两个数据点之间的演变过程,还可以展示数据是如何累计的。

劣势:使用场景有限,不适合用于数据流程较为复杂,或不需要按步骤展示的场景。

7.3 业务场景

1、场景描述:查看某员工工资的各个部分的数量变化关系,如下图所示:

Image Added

2、数据结构如下图所示:

Image Added

3、数据来源见附件:工资条.xlsx

4、操作步骤

(1)添加瀑布图组件,在数据选择区中,勾选“工资类型”和“金额”字段,由系统自动分配到“X轴”、“Y轴”;或拖拽“工资类型”字段到“X轴”,“金额”字段到“Y轴”。

Image Added

(2)在X轴“工资类型”字段的更多中,选择排序方式为“自定义排序”,调整字段顺序为:岗位工资、绩效工资、社保、公积金、个税和加班补贴。

Image Added

(3)在组件设置的属性中,设置总计值为 显示 ,并修改名称为 实发工资 ,如下图所示:

Image Added

(4)在组件设置的数据中,设置颜色为 高尚 颜色系列,点击确定,即可得到场景中所需图形效果,如下图所示:

Image Added

极坐标柱图
极坐标柱图
8 极坐标柱图

极坐标作为一种特殊的二维坐标系统,可以用来布局维度和度量,其中分类轴对应角度轴,以上半圆的垂直线为分类轴;指标轴对应径向轴。

极坐标柱图是柱图关于笛卡尔坐标系转换到极坐标系的仿射变换,用于进行单个项目的比较。

信息

由于我们的视觉系统更善于比较直线,所以笛卡尔坐标系更适合于比较各个分类的数值比较。因此,极坐标柱图从实用的角度去看,其更多的是一种审美上的需求。

8.1 配图建议

维度:一个维度字段;

指标:一个或多个度量字段;

8.2 图形特点

优势:分类比较结果明显。

劣势:适合展示的数据量比柱图更小。

8.3 业务场景

1、场景描述:某大型零售公司,想要升序查看各发货区域的销售量对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加极坐标柱图组件,在数据选择区中,勾选“发货区域”和“销售量”字段,由系统自动分配到“维度”、“指标”上;或拖拽“发货区域”字段到“维度”,“销售量”字段到“指标”。

(2)在 销售量 字段点击Image Added,在更多菜单中选择 排序方式>升序 ,即可得到场景中所需图形效果,如下图所示:

Image Added

极坐标堆积柱图
极坐标堆积柱图
9 极坐标堆积柱图

极坐标与堆积形态结合表现的一种柱图表现形式,用于比较每个分组的数据总量

9.1 配图建议

维度:一个维度字段;

指标:一个或多个度量字段;

颜色:一个维度。

9.2 图形特点

优势:清晰地比较每个大类别的数据总量差距,以及比较同个大类别下各个子类别的大小

劣势:只适用于维度数不多的情况。

9.3 业务场景

1、场景描述:某大型零售公司,想要分析各发货区域在2020和2021销售量的对比情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加极坐标堆积柱图组件,在数据选择区中,勾选“发货区域”、“订单年份”和“销售量”字段,由系统自动分配到“维度”、“颜色”和“指标”上;或拖拽“发货区域”字段到“维度”,“订单年份”字段到“颜色”,“销售量”字段到“指标”。

(2)在 销售量 字段点击Image Added,在更多菜单中选择 排序方式>升序 ,即可得到场景中所需图形效果,如下图所示:

Image Added

分区柱图
分区柱图
10 分区柱图

分区柱图可用于同时展示相同维度下不同分类的指标数据,适合用于展示数据差距较大的多指标数据。

10.1 配图建议

X轴:一个维度字段;

Y轴:一个或多个度量字段;

10.2 图形特点

优势:适用于展示数据差距较大的数据,可突出显示不同分类指标的数据量差距。

劣势:当维度数据较多时,图表的可读性会比较差。

10.3 业务场景

1、场景描述:某大型零售公司,想要分析各产品类别的销售量和库存情况,如下图所示:

Image Added

2、以产品内置Demo资源的“订单模型”作为数据来源,数据结构如下:

Image Added

3、操作步骤

(1)添加分区柱图组件,在数据选择区中,勾选“产品类别”、“库存”和“销售量”字段,由系统自动分配到“X轴”和“Y轴”上;或拖拽“产品类别”字段到“X轴”,“库存”和“销售量”字段到“X轴”。效果如下图所示:

Image Added

(2)在组件属性中,设置图例在上方,即可得到场景中所需图形效果,如下图所示:

Image Added

11 更多功能

  • 更多的图形属性设置项的详细介绍,可参考文档:图表属性设置
  • 配色修改:如需修改图形配色,可参考文档:颜色设置

  • 交互设计:如需了解交互相关功能,可参考文档:交互设计