--- order: 1 navTitle: 柱形图 --- # 仪表板组件-柱形图 柱形图是使用宽度相同的柱子的高度来表示数据多少，用于两个或以上的数值对比，进行比较各组数值之间的差别。如使用柱形图展示各大区的销售数量对比： ![基本柱形图示例](./images/2020-07-07-22-02-05.png) 示例地址：[柱形图](https://demo.succbi.com/v5/bi/column-chart/play) ## 使用柱形图组件{#start} 柱形图的**X轴**上至少取1个维度，如省份，产品类型等；**Y轴**上至少取1个度量，如销售数量，利润金额等 **操作步骤：** ![基本柱形图示例](./images/2023-12-11-11-14-00.gif) 1. 双击或拖入维度【大区】到**X轴** 2. 双击或拖入度量【销售数量】到**Y轴** 3. 点击大区右侧的下拉按钮，选择**排序**，选择**指定字段**，点击右上角加号，按照**销售数量**>**降序**进行排序 4. 在**属性栏**>**样式**>**系列**下可设置柱子的**宽度**，范围为**1~100%** 通过上述4个步骤即可快速实现展示各大区的销售数量，且按销售数量降序显示。 ## 属性介绍{#properties} ### 填充与背景{#background} 柱形图可以通过**填充**和**背景**分别控制柱形图柱子填充方式以及柱子背景填充方式，在**样式**>**系列**中进行设置。 ![布局](./images/2023-12-11-14-05-00.png) - **填充**：柱子数据部分的填充，可以设置为**自动**、**颜色填充**、**图片填充**或**图片填充**等 - **背景**：整个柱子的背景填充，可以设置为**颜色填充**、**图片填充**或**图片填充**等 ### 滚动{#scroll} 柱形图支持滚动条，可以设置滚动条显示方式、当前页展示数据量、是否循环滚动等，在**组件**>**滚动**中进行设置。 ![滚动](./images/2023-04-17-14-26-00.png) - **滚动条**：设置是否显示滚动条，支持以下三种方式： - 自动：根据内容自动判断是否显示滚动条，如有滚动条，需在查看界面移入组件才显示 - 显示：显示滚动条 - 无：不显示滚动条 - **展示数据量**：设置当前页显示多少数据，可以通过以下四种方式设置 - 轴刻度宽度：通过设置`X轴刻度宽度`控制当前页显示数据量，`X轴刻度宽度`为X轴相邻刻度之间的宽度 - 固定值：显示固定条数的数据 - 百分比：显示全部数据的百分比 - 累计值：显示数据随着滚动进行累加，与循环滚动搭配使用 - 起始值：初始时显示数据的条数 - **循环滚动**：柱形图自动滚动展示，当滚动到最后一条数据时，从头开始滚动 - 滚动模式：支持以下两种模式： - 逐条滚动：滚动时以条为单位，每次滚动一条数据 - 逐页滚动：滚动时以页为单位，每次滚动一页数据 - 滚动间隔：滚动的时间间隔，以秒为单位 ## 更多效果{#scenarios} 可以自定义柱形图的取数和样式实现不同效果的柱形图。 |多系列柱形图|堆积柱形图|柱子颜色各异|自动轮播柱形图| | ---- | ---- | ---- | ---- | |![效果二](./images/2020-07-14-12-56-48.png)|![堆积柱形图示例](./images/2020-07-14-15-30-44.png)|![离散](./images/2020-07-16-16-48-31.png)|![自动轮播](./images/2022-03-17-10-36-11.gif)| ### 多系列柱形图{#multiple} 多系列柱形图可以用来同时展示多个指标，比较不同指标之间的数量大小。 ![效果二](./images/2020-07-14-12-56-48.png) **实现方式** 将多个度量一一拖入到**y轴**上，如【零售总金额】、【交易总金额】 **设置多系列柱形图的布局方式** 当柱形图为多系列时，可以设置各个系列之间的**布局方式**，在**属性栏**>**样式**>**柱形图**>**系列布局**，有2种布局方式： |并排|重叠| | ---- | ---- | |不同指标的柱子不交叉的排列在x轴上|多个指标的柱子重叠在一起，柱子的高度为数量大的系列指标值| |![并排](./images/2020-07-14-12-56-48.png)|![重叠](./images/2020-07-14-14-58-14.png)| :::tip **并排**时柱子排列的前后顺序、及**重叠**时柱子的上下顺序与**y轴**下拖入的度量值的排列顺序一致。 ::: 多指标系列设置为**并排**排列时，可以设置多系列柱子之间的宽度，在**属性栏**>**样式**>**柱形图**>**布局**>**柱间间距**，范围为**0~100%**： ![柱间宽度](./images/2023-12-11-16-00-31.png) ### 双轴显示多系列{#y2} 多系列柱形图设置为**并排**排列时，若希望展示不同量级的数据，可以设置双轴显示。 **操作步骤：** ![柱形图双轴显示](./images/2023-12-11-09-19-07.gif) 1. 选中柱形图，在**属性栏**>**样式**>**系列**中展开【销售数量】，设置**布局**>**绘制轴**的值为`y2轴` 2. 轴标签：在**样式**>**坐标轴**中，展开y1轴，设置**标签**与**轴标题**为`显示`，y2轴同样设置 :::tip 更多设置 将y2轴的显示类型设置为其他类型，例如线型，可以使用[组合图](./dcombo.md)。 ::: ### 堆积柱形图{#stack} 堆积柱形图可以直观展示每个分组的值，以及反映出系列的总和。可以使用堆积柱形图展示各大区的销售数量总和以及各价格档次的比重，如下图所示： ![堆积柱形图示例](./images/2020-07-14-15-30-44.png) **实现方式** 拖入一个维度【价格档次】到**y轴**系列值下的[颜色](../../design/data/data-style/color.md)，即可实现按价格档次维度展示各大区的销售情况 ![颜色](./images/2023-12-11-15-04-01.png) ### 柱子颜色各异{#difference} 柱形图同一系列内的柱子颜色是相同的，我们可以使用[颜色](../../design/data/data-style/color.md)来实现同一系列的柱子颜色各异。 |连续|离散| | ---- | ---- | |按照色阶进行颜色标记|按照色板值进行颜色标记| |![连续](./images/2020-07-16-16-47-18.png)|![离散](./images/2020-07-16-16-48-31.png)| **实现方式** 将度量【票房】拖到**y轴**系列值下的[颜色](../../design/data/data-style/color.md)，**右键**选择**连续**或**离散** ![离散](./images/2020-07-14-15-15-36.png) ### 对数变换{#logarithm} 在柱形图中数据差异过大时，不考虑数据填充的高度比例且对美观度有要求的情况下，可以使用对数标度进行数据变换填充。 **实现原理：** 类似于对数计算公式y=loga x，其中a为我们设置的底数，x为我们实际数据，计算出的y就是填充在柱形图高度的数据。 ![对数](./images/2021-03-31-11-02-26.png) **实现方式** 在**样式**>**坐标轴**>**y轴**>**标度**中选择**对数**标度，再根据实际情况设置**底数**大小即可。 ![设置](./images/2023-12-11-11-12-32.png) ### 设置柱形图的标签倾斜换行{#incline} 当图形的轴标签文字多长时，可以设置文字倾斜显示，如下截图所示： ![柱形图标签倾斜换行](./images/2021-10-28-17-54-34.png) **实现思路**：在样式>坐标轴>x轴处，设置标签的间隔属性选择为显示全部，系统会自动根据位置计算倾斜角度。 ### 设置柱形图的标签竖排展示{#vertical} 当柱形图的X轴标签内容较多时，可以设置文字竖排展示，如下截图所示： |效果图|属性配置图| | ---- | ---- | |![效果图](./images/2024-9-19-11-26-01.png)|![设计图](./images/2024-9-19-11-22-01.png)| **实现方式** 在**样式**>**坐标轴**>**x1轴**>**轴标签**中勾选**显示标签**，**间隔**设置为自适应、**每行最大字数**设置为1。 ### 自动轮播{#rotation} 当柱形图的X轴标签内容较多，无法在屏幕上全部显示时，可以设置柱形图自动轮播。 ![自动轮播](./images/2023-04-19-13-58-00.gif) 示例地址：[自动轮播柱形图](https://demo.succbi.com/v5/bi/column-chart/play) **实现方式** 在**样式**>**组件**>**滚动**中勾选**循环滚动**，再根据需求设置**展示数据量**、**滚动模式**等即可。