「图表」小程序图形详解

简介

「图表」小程序（下文简称「图表」）为你提供了丰富多样的图形，适用于不同场景的数据可视化。通过本文你可以了解所有图形的使用场景。

柱状图

基础柱状图

以长方形的长度来表示不同分类的数值大小的图形。一般横轴为维度，纵轴为数值。

使用场景
比如以 “门店名称” 作为维度，“销售数量” 作为数值，就可以通过长方形的长短来比较不同店铺之间的销售数量，业绩谁好谁坏一眼便知。

基础柱状图中还可以使用「分组」功能将图形进行第二次分类，我们称之为分组柱状图。

比如，下图是在基础柱状图上设置了商品大类作为分组依据， “南山店” 的总销售数量拆分为了 “电脑办公”、“手机数码”、“家用电器” 三类商品的销售数量。如果我们将三类商品的销售数量相加，会发现正好等于基础图形中 ”南山店“ 的总销售量：35 + 82 +57 = 174

简而言之，分组功能可以将一个柱形拆分出多个柱形， 方便你对同一个店铺内不同类别商品的销售数量进行对比。

堆叠柱状图

基础柱状图的扩展形式，将每根柱子分割成不同颜色的小柱形，并以堆叠的形式显示大分类下的细分类目占比情况。

使用场景
延续基础柱状图的场景，如果你既想对比各个店铺之间的总销售量数据，又想对比每个店铺中不同分类商品的销售数据，就可以使用 “堆叠柱状图” 。

比如，以 “门店名称” 作为维度，“销售数量” 作为数值，然后再设置以 “商品大类” 作为堆叠依据，就得到下方图形。实际上，它是将 “分组柱状图” 中 “南山店” 分类下的三个柱形重叠在了一起。

百分比堆叠柱状图

基础柱状图的扩展形式，将每根柱子分割成不同颜色的小柱形，并以百分比的形式显示大分类下的细分类目占比情况。

使用场景
如果你并不在意各个店铺之间的总销售数量对比，只在意每个店铺中不同分类商品占据店铺总销售数量的比例，就可以使用 “百分比堆叠柱状图”。

比如，以 “门店名称” 作为维度，“销售数量” 作为数值，然后再设置以 “商品大类” 作为百分比堆叠依据，就得到下方图形。它的纵轴只有[0 - 1]，表示 0% - 100%，可以从该图形看出 “电脑办公” 占聚了 “南山店” 总销售数量的 20.11%。

条形图

基础条形图

与柱状图类似，不同之处在于它的横轴为数值，纵轴为维度。

使用场景
比如，下图以 “门店名称” 作为维度，“销售数量” 作为数值，就可以查看不同店铺之间销售数量的对比。相比于柱状图来说，它对比数值时更加显眼清晰。

基础条形图中还可以使用「分组」功能将图形进行第二次分类，我们称之为 分组条形图。

比如下图，在 “基础条形图” 上设置了 “商品大类” 作为分组依据， “南山店”的总销售数量拆分为了 “电脑办公”、“手机数码”、“家用电器” 三类商品的销售数量。如果我们将三类商品的销售数量相加，会发现正好等于基础图形中 “南山店” 的总销售量：35 + 82 +57 = 174

简而言之，分组功能可以将一个柱形拆分出多个柱形， 方便你对同一个店铺内不同类别商品的销售数量进行对比。

堆叠条形图

基础条形图的扩展形式，将每根柱子分割成不同颜色的小柱形，并以堆叠的形式显示大分类下的细分类目占比情况。

使用场景
延续 “基础条形图” 的场景，如果你既想对比各个店铺之间的总销售量数据，又想对比每个店铺中不同分类商品的销售数据，就可以使用 “堆叠条形图” 。

比如，以 “门店名称” 作为维度，“销售数量” 作为数值，然后再设置以 “商品大类” 作为堆叠依据，就得到下方图形。实际上，它是将 “分组柱状图” 中 “南山店” 分类下的三个柱形，重叠在了一起。

百分比堆叠条形图

基础条形图的扩展形式，将每根柱子分割成不同颜色的小柱形，并以百分比的形式显示大分类下的细分类目占比情况。

使用场景
如果你并不在意各个店铺之间的总销售数量对比，只在意每个店铺中不同分类商品占据店铺总销售数量的比例，你可以使用 “百分比堆叠条形图”。

比如，以 “门店名称” 作为维度，“销售数量” 作为数值，然后再设置以 “商品大类” 作为百分比堆叠依据，就得到下方图形。它的横轴只有[0 - 1]，表示 0% - 100%，可以从该图形看出 “电脑办公” 占聚了 “南山店” 总销售数量的 20.11%。

饼状图

基础饼状图

通过扇形区块的颜色和面积来展现数据的分类和占比情况。

使用场景
比如，以 “门店名称” 作为维度，“销售数量” 作为数值，就可以对比不同店铺的销售数量占据总销售量的比例关系。相比于 “柱状图” 和 “条形图”，“饼状图” 更注重凸显分类数据之间的比例关系。

环状图

与饼状图类似，但是圆心空白区域可以显示所有维度的汇总数值。

使用场景 比如，以 “门店名称” 作为维度，“销售数量” 作为数值，就可以对比不同店铺的销售数量占据总销售量的比例关系。相比于 “饼状图” ，“环状图” 中心显示了店铺中销售量 “ 844 ”，凸显了一个关键指标信息。

折线图

基础折线图

用直线将数据点连接起来的图形，适用于显示某段时间内数据的连续变化趋势。

使用场景
比如，以 “销售时间” 作为维度，“销售数量” 作为数值，就可以查看一段时间内的销售数量的增长趋势，业绩是否在持续增长一眼便知。

基础折线图中还可以使用「分组」功能将图形进行第二次分类，我们称之为分组折线图。

比如，下图是在基础折线图上设置了 “商品大类” 作为分组依据， “2020/03/03” 日期的总销售数量拆分为了“电脑办公”、“手机数码”、“家用电器” 三类商品的销售数量。如果我们将三类商品的销售数量相加，会发现正好等于基础图形中 “2020/03/03” 的总销售量：8 + 11 +37 = 56

简而言之，分组功能可以将一个折线拆分出多个折线， 方便你对同一段日期内不同分类的商品销售数量进行对比。

堆叠折线图

基础折线图的扩展形式，将一条折线分割成不同颜色的小折线，并以堆叠的形式显示大分类下的细分类目占比情况。

使用场景
延续基础折线图的场景，如果你既想了解一段时间内的总销售量趋势，又想对比每个店铺中不同分类商品的销售量趋势，就可以使用堆叠折线图。

比如，以 “销售时间” 作为维度，“销售数量” 作为数值，然后再设置以 “商品大类” 作为堆叠依据，就得到下方图形。

实际上，它是将 “分组折线图” 中 “2020/03/03” 分类下的三条折线依次往上叠加数值，你会发现 “家用电器” 这条折线与 “基本折线图” 是相同的。

散点图

将数据以点的形式分布在直角坐标系中，用以寻找两个变量（X和Y轴）之间的关系。它适用于数据条数比多且横纵坐标都为数值类型的场景，用于展示数据的分布状态。

使用场景
比如，以 “单价” 作为维度，“销售额” 作为数值，就可以查看随着 “单价” 增高，每个订单“销售额” 的变化趋势。从下图中可以看出，随着商品的销售单价增高，每个订单总销售额就越高。如果数据量够丰富的情况下，可以通过散点图推测数 “单价” 和 “销售额” 的正向线性关系。

以上就是维格表的「图表」小程序目前支持的图形种类，更多丰富的图形种类持续开发中，敬请期待。