动态条形图是柱状图的一种,支持设置条形图样式、坐标轴、标题、工具栏和多个系列的数据设置等;在应用场景中,可用于展示多维的数据差异,更直观地解读数据。本文介绍动态条形图的各配置项。
![编辑动态条形图](https://qcloudimg.tencent-cloud.cn/image/document/6e6bb0d46ee60cb8f28726cb113012c3.png)
![编辑动态条形图](https://qcloudimg.tencent-cloud.cn/image/document/6e6bb0d46ee60cb8f28726cb113012c3.png)
编辑组件时,先使用鼠标单击选中组件。
设置属性
位置大小
大小
设置组件的宽与高,单位为 px。
单击![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/eae4dede1966558a52af4f29c6ab9ba0.png)
图标,可锁定组件的宽高比,等比例调整组件的宽高。
![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/eae4dede1966558a52af4f29c6ab9ba0.png)
再次单击图标,可解锁组件的宽高比,调整宽高将不受等比例限制。
位置
设置组件的坐标位置,单位为 px。
横坐标为组件左上角与画布左边界的距离。
纵坐标为组件左上角与画布上边界的距离。
旋转
手动输入角度值,可调整组件的旋转角度。
拖动![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/8c00834cdc5112cd35252993a72bcdf9.png)
图标内的小圆点,可调整组件的旋转角度。
![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/8c00834cdc5112cd35252993a72bcdf9.png)
单击![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/e358fac2e825e81f76b8156e71190ef9.png)
图标,可设置组件左右或上下翻转样式。
![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/e358fac2e825e81f76b8156e71190ef9.png)
图表
图表间距
![图表间距设置图](https://qcloudimg.tencent-cloud.cn/image/document/56b7a1d10f7c75c16b7e67767e9edce0.png)
![图表间距设置图](https://qcloudimg.tencent-cloud.cn/image/document/56b7a1d10f7c75c16b7e67767e9edce0.png)
边间距:条形图区域与组件上下左右四个边界间的距离,单位为 px。
柱状图样式
用于设置条形图中每个柱子的样式。
![条形图样式设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/4eb5b34f8c8727c24fa102194cd27df5.png)
![条形图样式设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/4eb5b34f8c8727c24fa102194cd27df5.png)
基础设置
柱间距:设置条形柱间的间距,可选项范围:[0-1]。
圆角半径:设置条形柱末端的圆角半径,可选项范围:[0-100]。
圆角位置:设置条形柱圆角的位置,可选项包括:全部、顶端、底部。
背景颜色:设置条形柱的背景颜色。
标签间距:设置条形柱上的标签与柱端的距离,可选项范围:[0-50]。
柱标签
字体字号:设置柱标签的文字字体和字体大小。
文字颜色:设置柱标签的文字颜色。
文字样式:设置柱标签的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置柱标签的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
![条形图样式设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/719319999173a7cac0994e8d3b1dab3d.png)
![条形图样式设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/719319999173a7cac0994e8d3b1dab3d.png)
柱单位
字体字号:设置柱单位的文字字体和字体大小。
文字颜色:设置柱单位的文字颜色。
文字样式:设置柱单位的文字样式,可选项包括:默认值、斜体、倾斜
文字粗细:设置柱单位的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)
单位:设置柱标签的数值单位,可设置为空。
单位间隔:设置柱标签数值与单位间的距离。
柱动画
间隔(s):设置柱动画效果重复展示的间隔时间,单位为秒。
![条形图样式设置图 3](https://qcloudimg.tencent-cloud.cn/image/document/859b503a4b81418586245e4b63b8aa89.png)
![条形图样式设置图 3](https://qcloudimg.tencent-cloud.cn/image/document/859b503a4b81418586245e4b63b8aa89.png)
柱装饰
颜色:设置柱体的装饰颜色。
描边宽度:设置柱体装饰的描边宽度。
留白:设置柱体与柱体装饰间的距离。
柱行设置
奇行背景色:设置奇数行柱体的背景颜色;当背景颜色开启了渐变色,则此项为渐变色的开始颜色。
结束色:当背景颜色开启了渐变色,则此项为奇数行柱体渐变色的结束颜色。如未开启渐变色,则此项设置无效。
开启渐变:开启或关闭奇数行柱体的背景渐变色。
偶行背景色:设置偶数行柱体的背景颜色;当背景颜色开启了渐变色,则此项为渐变色的开始颜色。
结束色:当背景颜色开启了渐变色,则此项为偶数行柱体渐变色的结束颜色。如未开启渐变色,则此项设置无效。
开启渐变:开启或关闭偶数行柱体的背景渐变色。
坐标轴
X 轴
![坐标轴设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/bc458ca4a269dfdac23c595ad61c74a1.png)
![坐标轴设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/bc458ca4a269dfdac23c595ad61c74a1.png)
标题
文本:设置 X 轴的标题文字。
字体字号:设置 X 轴标题的文字字体和字体大小。
文字颜色:设置 X 轴标题的文字颜色。
文字样式:设置 X 轴标题的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置 X 轴标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
间距:设置 X 轴标题与 X 坐标轴间的距离。
![坐标轴设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/07da64e505a35c8e8787361e22ce8eeb.png)
![坐标轴设置图 2](https://qcloudimg.tencent-cloud.cn/image/document/07da64e505a35c8e8787361e22ce8eeb.png)
位置:设置 X 标题的位置,可选项包括:顶部、底部、左侧与右侧。
数据类型:设置 X 坐标值的数据类型,可选项包括:数值型、时间型、类目型与自动类目型。
数据类型 | 类型说明 |
数值型 | 用于连续数据 |
时间型 | 用于连续的时序数据 |
类目型 | 用于离散的类目数据 |
自动类目型 | 用于离散的类目数据,支持自动聚合类标签 |
标签
显示格式:设置坐标轴刻度标签的显示格式。
字体字号:设置坐标轴刻度标签的文字字体和字体大小。
文字颜色:设置坐标轴刻度标签的文字颜色。
文字样式:设置坐标轴刻度标签的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置坐标轴刻度标签的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置坐标轴刻度标签的文字行高。
角度:设置坐标轴刻度标签的显示角度,可选项包括:水平、垂直、倾斜。
间距:设置坐标轴刻度标签的与坐标轴间的距离。
大小:设置坐标轴刻度标签的宽与高。
水平对齐:设置坐标轴刻度标签的水平对齐方式,可选项包括:左对齐、水平居中、右对齐。
垂直对齐:设置坐标轴刻度标签的垂直对齐方式,可选项包括:顶部对齐、垂直居中、底部对齐。
超出宽度:设置坐标轴刻度标签超出宽度时的处理方式,可选项包括:截断、换行、强制换行。
超出高度:设置坐标轴刻度标签超出高度时的处理方式,可选项包括:显示、截断。
截断省略符:设置坐标轴刻度标签被截断时显示的省略符号,可设置为空。
![坐标轴设置图 3](https://qcloudimg.tencent-cloud.cn/image/document/316337e653fd0cfb785eb2efc4bf2f4a.png)
![坐标轴设置图 3](https://qcloudimg.tencent-cloud.cn/image/document/316337e653fd0cfb785eb2efc4bf2f4a.png)
单位
单位文本:设置坐标轴上显示的单位文字。
字体字号:设置坐标轴单位的文字字体和字体大小。
文字颜色:设置坐标轴单位的文字颜色。
文字样式:设置坐标轴单位的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置坐标轴单位的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
间距:设置坐标轴单位与坐标轴间的距离。
轴线
宽度:设置坐标轴线的宽度。
颜色:设置坐标轴线的颜色。
刻度
数量:设置坐标轴的刻度数量。
长度:设置坐标轴的刻度线长度。
宽度:设置坐标轴的刻度线宽度。
颜色:设置坐标轴的刻度线颜色。
![坐标轴设置图 4](https://qcloudimg.tencent-cloud.cn/image/document/542b958bc3a8360dd3641b9ec3213204.png)
![坐标轴设置图 4](https://qcloudimg.tencent-cloud.cn/image/document/542b958bc3a8360dd3641b9ec3213204.png)
刻度范围
最小值:设置坐标轴刻度的最小值,小于最小值将被隐藏。
最大值:设置坐标轴刻度的最大值,大于最大值将被隐藏。
刻度偏移
最小值偏移:设置坐标轴刻度的最小值偏移值。
最大值偏移:设置坐标轴刻度的最大值偏移值。
网格线
宽度:设置图表网格线的宽度。
颜色:设置图表网格线的颜色。
类型:设置图表网格线的显示类型,可选项包括:实线与虚线。
装饰
形状:设置图表的装饰形状,显示于网格线与条形图交接处,可选项包括:圆形与方形。
大小:设置图表网格线装饰形状的大小。
Y 轴
Y 轴配置项同 X 轴配置项。
系列
![系列设置图](https://qcloudimg.tencent-cloud.cn/image/document/0f76b5f72cf1930cb4000dd6a54b9785.png)
![系列设置图](https://qcloudimg.tencent-cloud.cn/image/document/0f76b5f72cf1930cb4000dd6a54b9785.png)
数据系列
配色方案:将选择的色系自动映射为多个系列的柱状颜色。
系列
映射字段:设置系列的值与名称,其中系列 s 值表示 s 字段对应的值,不同的值对应不同的系列(一个系列代表显示到图表中的一组数据)。
开始颜色:设置系列柱体的开始颜色;当开启了渐变色时,此项为渐变色的开始颜色。
结束颜色:设置系列柱体的结束颜色;当开启了渐变色时,此项为渐变色的结束颜色。
启用渐变:开启或关闭柱体的渐变色。
光晕颜色
显示最大值颜色:开启或关闭显示最大值柱体的颜色。
最大值颜色:设置最大值柱体的开始颜色。
结束颜色:设置最大值柱体的结束颜色。
启用渐变:开启或关闭最大值柱体的渐变色。
添加系列n支持新增和删除系列,不同的系列可以自由设置系列属性。
辅助
标题
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/f6f8a38039e583fe1a2e308b04f7c173.png)
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/f6f8a38039e583fe1a2e308b04f7c173.png)
标题字体
文本:设置条形图的标题文字。
字体字号:设置标题的文字字体和字体大小。
文字颜色:设置标题的文字颜色。
文字样式:设置标题的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置标题的文字行高。
对齐方式:设置标题的文字对齐方式,可选项包括:左对齐、居中对齐、右对齐。
位置:设置标题显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。
间距:设置标题相对于图表和边界间的距离。
图例
![图例设置图](https://qcloudimg.tencent-cloud.cn/image/document/2ccf8c536a6084e03200db812ab56cc0.png)
![图例设置图](https://qcloudimg.tencent-cloud.cn/image/document/2ccf8c536a6084e03200db812ab56cc0.png)
图标
图标形状:设置图例中各个系列的图标形状,支持圆形与矩形;其中图标颜色与系列柱体颜色一致。
布局朝向:设置图例中各个系列的布局方向,支持水平显示和垂直显示。
字体字号:设置图例的文字字体和字体大小。
文字颜色:设置图例的文字颜色。
文字样式:设置图例的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置图例的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置标题的文字行高。
位置:设置图例显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。
图标距离:设置图标与文字间的距离。
系列间距:设置图例中系列间的距离。
间距:设置图例相对于图表和边界间的距离。
工具提示
当鼠标悬停在图表中的柱体上时,将会显示此提示。
![工具提示设置图](https://qcloudimg.tencent-cloud.cn/image/document/f8505748a183dc8169948360cfad219d.png)
![工具提示设置图](https://qcloudimg.tencent-cloud.cn/image/document/f8505748a183dc8169948360cfad219d.png)
样式
背景颜色:设置提示的背景颜色。
边框颜色:设置提示的边框颜色。
间距:设置提示内容与四边的距离。
文本
字体字号:设置提示文字的文字字体和字体大小。
文字间距:设置提示文字间的距离。
文字颜色:设置提示文字的颜色。
设置数据
数据源
自定义函数
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/2ee811ad7233763ae321514275b75160.png)
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/2ee811ad7233763ae321514275b75160.png)
自定义函数用来对数据源中的数据做处理,需要使用 JavaScript 代码。其中入参
data
是数据源中的数据,返回值需要与数据源中“静态数据”的数据格式保持一致。可用于过滤数据、聚合数据、格式化数据等。字段映射
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/96167e80616316f6b80e520fe69fe924.png)
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/96167e80616316f6b80e520fe69fe924.png)
将数据源中返回的业务字段一一映射为图表提供的默认字段,图表字段的具体意思可查看字段前的问号图标。字段映射成功后,将在状态栏中显示映射成功。
自动更新
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/f9b9bb00fe519aee9399fc052a5b862c.png)
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/f9b9bb00fe519aee9399fc052a5b862c.png)
自动更新用于设置组件定时更新数据,在选择动态数据源或开启自定义函数的情况下该选项才可以设置。当勾选自动更新选项并输入定时时长(单位为秒),系统将根据设定的时长轮询数据源,获取最新数据并更新到相应图表中。