页面树结构

版本比较

标识

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

...

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

柱图
柱图
2 柱图

2.1 配图建议

X轴:一个维度字段;一个或多个维度字段;

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

2.2 图形特点

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

...

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

3.1 配图建议

X轴:一个维度字段;一个或多个维度字段;

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

颜色:一个维度。

3.2 图形特点

...

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

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

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

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

信息

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

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

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

用于并列展示维度下各个分类指标的柱形图。

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

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

用于并列展示维度下各个分类指标的柱形图。

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

11 更多功能

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

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