仪表板组件-柱形图

柱形图是使用宽度相同的柱子的高度来表示数据多少，用于两个或以上的数值对比，进行比较各组数值之间的差别。如使用柱形图展示各大区的销售数量对比：

示例地址：柱形图 (opens new window)

使用柱形图组件

柱形图的X轴上至少取1个维度，如省份，产品类型等；Y轴上至少取1个度量，如销售数量，利润金额等

操作步骤：

1. 双击或拖入维度【大区】到X轴
2. 双击或拖入度量【销售数量】到Y轴
3. 点击大区右侧的下拉按钮，选择排序，选择指定字段，点击右上角加号，按照销售数量>降序进行排序
4. 在属性栏>样式>系列下可设置柱子的宽度，范围为1~100%

通过上述4个步骤即可快速实现展示各大区的销售数量，且按销售数量降序显示。

属性介绍

填充与背景

柱形图可以通过填充和背景分别控制柱形图柱子填充方式以及柱子背景填充方式，在样式>系列中进行设置。

• 填充：柱子数据部分的填充，可以设置为自动、颜色填充、图片填充或图片填充等
• 背景：整个柱子的背景填充，可以设置为颜色填充、图片填充或图片填充等

滚动

柱形图支持滚动条，可以设置滚动条显示方式、当前页展示数据量、是否循环滚动等，在组件>滚动中进行设置。

• 滚动条：设置是否显示滚动条，支持以下三种方式：
  • 自动：根据内容自动判断是否显示滚动条，如有滚动条，需在查看界面移入组件才显示
  • 显示：显示滚动条
  • 无：不显示滚动条
• 展示数据量：设置当前页显示多少数据，可以通过以下四种方式设置
  • 轴刻度宽度：通过设置X轴刻度宽度控制当前页显示数据量，X轴刻度宽度为X轴相邻刻度之间的宽度
  • 固定值：显示固定条数的数据
  • 百分比：显示全部数据的百分比
  • 累计值：显示数据随着滚动进行累加，与循环滚动搭配使用
    • 起始值：初始时显示数据的条数
• 循环滚动：柱形图自动滚动展示，当滚动到最后一条数据时，从头开始滚动
  • 滚动模式：支持以下两种模式：
    • 逐条滚动：滚动时以条为单位，每次滚动一条数据
    • 逐页滚动：滚动时以页为单位，每次滚动一页数据
  • 滚动间隔：滚动的时间间隔，以秒为单位

更多效果

可以自定义柱形图的取数和样式实现不同效果的柱形图。

多系列柱形图	堆积柱形图	柱子颜色各异	自动轮播柱形图

多系列柱形图

多系列柱形图可以用来同时展示多个指标，比较不同指标之间的数量大小。

实现方式

将多个度量一一拖入到y轴上，如【零售总金额】、【交易总金额】

设置多系列柱形图的布局方式

当柱形图为多系列时，可以设置各个系列之间的布局方式，在属性栏>样式>柱形图>系列布局，有2种布局方式：

并排	重叠
不同指标的柱子不交叉的排列在x轴上	多个指标的柱子重叠在一起，柱子的高度为数量大的系列指标值

TIP

并排时柱子排列的前后顺序、及重叠时柱子的上下顺序与y轴下拖入的度量值的排列顺序一致。

多指标系列设置为并排排列时，可以设置多系列柱子之间的宽度，在属性栏>样式>柱形图>布局>柱间间距，范围为0~100%：

双轴显示多系列

多系列柱形图设置为并排排列时，若希望展示不同量级的数据，可以设置双轴显示。

操作步骤：

1. 选中柱形图，在属性栏>样式>系列中展开【销售数量】，设置布局>绘制轴的值为y2轴
2. 轴标签：在样式>坐标轴中，展开y1轴，设置标签与轴标题为显示，y2轴同样设置

更多设置

将y2轴的显示类型设置为其他类型，例如线型，可以使用组合图。

堆积柱形图

堆积柱形图可以直观展示每个分组的值，以及反映出系列的总和。可以使用堆积柱形图展示各大区的销售数量总和以及各价格档次的比重，如下图所示：

实现方式

拖入一个维度【价格档次】到y轴系列值下的颜色，即可实现按价格档次维度展示各大区的销售情况

柱子颜色各异

柱形图同一系列内的柱子颜色是相同的，我们可以使用颜色来实现同一系列的柱子颜色各异。

连续	离散
按照色阶进行颜色标记	按照色板值进行颜色标记

实现方式

将度量【票房】拖到y轴系列值下的颜色，右键选择连续或离散

对数变换

在柱形图中数据差异过大时，不考虑数据填充的高度比例且对美观度有要求的情况下，可以使用对数标度进行数据变换填充。

实现原理： 类似于对数计算公式y=loga x，其中a为我们设置的底数，x为我们实际数据，计算出的y就是填充在柱形图高度的数据。

实现方式

在样式>坐标轴>y轴>标度中选择对数标度，再根据实际情况设置底数大小即可。

设置柱形图的标签倾斜换行

当图形的轴标签文字多长时，可以设置文字倾斜显示，如下截图所示：

实现思路：在样式>坐标轴>x轴处，设置标签的间隔属性选择为显示全部，系统会自动根据位置计算倾斜角度。

设置柱形图的标签竖排展示

当柱形图的X轴标签内容较多时，可以设置文字竖排展示，如下截图所示：

效果图	属性配置图

实现方式

在样式>坐标轴>x1轴>轴标签中勾选显示标签，间隔设置为自适应、每行最大字数设置为1。

自动轮播

当柱形图的X轴标签内容较多，无法在屏幕上全部显示时，可以设置柱形图自动轮播。

示例地址：自动轮播柱形图 (opens new window)

实现方式

在样式>组件>滚动中勾选循环滚动，再根据需求设置展示数据量、滚动模式等即可。