图表概述
柱状图是由宽度相同长度不同的长方形组成的统计图表,可用长方形的长度来映射不同的数值,以可视化表达数据间差距。
使用场景
柱状图常用于小数据量的统计对比分析,比较各组内或各组间数据的差距或走势。具体使用情况包括:
效果展示
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879348.png)
使用限制
说明 V5.0 以下的版本由于兼容问题,无法直接升级。如需使用最新版本柱状图,建议重新添加。V5.0以上可直接升级获取最新的V5.x版本。
操作步骤
创建图表流程通常为准备业务数据,将数据接入组件并适配,配置组件样式,配置图表联动。
前提条件
接入数据
柱状图接收参数如下表。数据配置的具体操作流程见组件数据源配置。
字段 | 说明 |
x | 用于配置柱状图中每个柱子的类目,即x轴的值。 |
y | 用于配置柱状图中每个柱子的值,即y轴的值。 |
colorField | (可选)颜色映射字段,用于设置柱子的颜色映射样式。 |
trace | (可选)分组映射字段,用于设置同类目下的不同分组数据。 |
下面展示常见几种数据结构的处理以及图表效果。
当您的数据类型默认不带有colorField
,或者不需要颜色设置时。
[
{
"x": "类型一",
"y": 28,
},
...
]
图表将展示如下效果:
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879325.png)
此时您可通过关闭柱子颜色视角映射,或者通过数据处理增加colorField
字段且所有项的colorField
值相同的方式给图表增加颜色。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p881794.png)
[
{
"x": "类型一",
"y": 28,
"colorField": 300,
},
...
]
图表将展示如下:![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879327.png)
当x轴数据每个类目有细分时,通过colorField
值的不同表达不同细分子类。
[
{
"colorField": 100,
"x": "类型一",
"y": 28
},
{
"colorField": 200,
"x": "类型一",
"y": 20
},
...
]
图表将展示如下:
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879336.png)
调整样式
图表支持图形、坐标、动画、交互、图例、标注的配置。柱状图的组成元素具体参见下图,更多可视化图表元素介绍可参见可视化组件设计指引。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879372.png)
下面介绍关键属性的使用,更多样式配置请参见配置项介绍部分。
堆叠分组展示
展示形式默认形式为堆叠效果,即相同类目不同colorField
数据进行堆叠。当切换至分组效果时,不同colorField
数据将进行分组展示。可通过分组间距调整出最佳视觉效果。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879380.png)
扫光动画
扫光动画默认开启,如配置点击交互事件,则需关闭此选项。
交互增强
选中态生效,鼠标点击或悬浮在图形时可进行高亮显示。需禁用扫光动画。
交互增强生效时,X轴下方出现缩略轴或滚动条,可进行数据展示范围的筛选。需禁用扫光动画。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879384.png)
标注分析
添加辅助线、辅助框以及高亮柱子的方式进行数据分析展示。下图添加配置:
平均值辅助线,展示该组数据的平均水平线。
平均值以上辅助框,展示某些处于平均值以上的数据。
高亮特定符合条件的柱子数据,此处为colorField=100
。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p879394.png)
图表联动
当您希望点击具体某个柱子查看该类目对应的详细表格信息时,您可以用图表联动方式实现。
图表联动的具体操作,请参见组件交互配置。
说明 当需要激活柱图数据项点击事件时,需要关闭样式面板的扫光动画属性。
配置项介绍
样式面板
尺寸:包括组件的宽度和高度,单位为px。
定位:包括组件的横坐标和纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
旋转:以组件的中心为中心点,进行旋转,单位为度(°)。
手动输入角度值,控制组件的旋转角度。
单击
图标,控制组件左右翻转样式。
单击
图标,控制组件上下翻转样式。
不透明度:取值范围为0~1。为0时,图表隐藏;为1时,图表全部显示。默认为1。
图形
参数 | 说明 |
图表边距 | 单击 图标,控制图表边距的显隐。打开开关后,可配置柱图区域与组件上下左右四个边界之间的距离,单位默认px。 |
自定义分组 | 打开开关,需要配置数据面板中的trace拆分字段,对数据做更细粒度的拆分效果,且数据拆分后将会变成堆叠分组的样式;关闭开关,默认根据数据面板中的colorField颜色映射字段分组。 |
组内间距 | 数据拆分后,可自定义设置同一分类下柱子内部的间距,单位px。在以下两种情况下可配置: |
组间间距 | 数据拆分后,可自定义设置不同分类下柱子之间的间距,单位px。在以下两种情况下可配置: |
展示形式 | 柱子分类根据数据面板中的colorField颜色映射字段分组时展现的形式,包括堆叠和分组两种展现样式。仅在关闭自定义分组配置项开关时可配置。 |
柱子宽度 | 柱子的宽度值,单位px,单击 图标,控制柱子宽度配置项的显隐。 |
柱子圆角 | 柱子在四个对角的圆角值,单位px。 |
柱子颜色 | 柱子的颜色,请参见颜色映射器使用说明,配置不同柱子的映射颜色样式。 |
柱子发光 | 柱子的发光样式,单击 图标,控制柱子发光配置项的显隐。 发光颜色:包括同步柱子开关和不透明度。当关闭同步柱子开关后,可以单独设置发光颜色。 模糊系数:设置柱子发光的模糊系数,范围0~50,数值越大柱子间的发光范围越模糊。 阴影偏移:设置柱子发光的水平和垂直阴影偏移,单位默认px。
|
柱子标签 | 柱子的标签样式,单击 图标,控制柱子标签配置项的显隐。 标签字段:标签的内容需要和数据面板中字段的内容对应。 数值格式:设置标签的数值格式,可选默认、11(整数)、11.1(浮点数)、11.11(浮点数)、11%(百分比)、11.1%(百分比)、1,111(千分位)和1,111.1(千分位)。更多数据显示格式请参见数据显示格式说明,仅在标签字段选择range 或y 时显示。 前后缀:设置柱子标签的前后缀内容。 标签位置:选择标签内容的显示位置,可选顶部、中间和底部。 相对偏移:柱子标签相对柱子在垂直和水平方向的偏移量,单位为px。 布局优化:自动优化被遮盖文字和边界文字。 文本样式:柱子标签的文本样式,包括文本的字体样式、文字粗细、字号和颜色。 文本描边:柱子标签的文本描边样式,包括描边线的粗细值和颜色。
|
贴图 | 柱子的贴图样式,单击 图标,控制贴图配置项的显隐。 类型:贴图的类型,包括点形、线形、方形和图片。 填充样式:设置贴图的填充样式。请参见颜色选择器说明,配置贴图的颜色样式。 描边样式:设置贴图的描边样式。请参见颜色选择器说明,配置贴图的颜色样式。当类型选择为点形或正方形时显示。 额外样式:贴图的其他样式,包括贴图的图形尺寸、图形间距、线间距、旋转角度和是否交错开关。当选择类型为图片时,可以设置图片地址、平铺宽度、平铺高度、平铺间距和旋转角度。
|
坐标:组件坐标轴包括X轴和Y轴两种。
X轴
X轴显示:打开开关,组件内X轴样式可见;关闭开关,组件内X轴样式不可见。
数据类型:X轴数据的类型,可选类目型和时间型。
轴线:柱图的X轴轴线样式,包括线的类型、线的粗细和线的颜色,可单击
图标控制X轴轴线样式的显隐。
轴标题:柱图的X轴轴标题样式,可单击
图标控制X轴轴标题的显隐。
参数 | 说明 |
标题显示 | 轴标题显示的文字内容。 |
展示方式 | 轴标题的展示方式,包括标题的角度值和标题的偏移值。 |
文本样式 | 轴标题文本的字体样式、文字粗细、字号和颜色。 |
轴标签:柱图的X轴轴标签样式,可单击
图标控制X轴轴标签的显隐。
参数 | 说明 |
两端间距 | X轴标签距离轴线两端之间的距离,单位%。 |
标签展示 | 标签的展示样式,包括:轴标签的数量、标签的前后缀内容、标签的角度值、偏移量和标签展示时候的对齐方式。 |
文本样式 | 轴标签文本的字体样式、文字粗细、字号和颜色。 |
刻度线:柱图的X轴刻度线样式,包括刻度线的长度值、粗细值和颜色,可单击
图标控制X轴刻度线样式的显隐。
网格线:柱图的X轴网格线的样式,包括网格线的线型样式、粗细、颜色、长度和网格线之间的间距值,可单击
图标控制X轴网格线的显隐。
Y轴
Y轴显示:打开开关,组件内Y轴样式显示可见;关闭开关,组件内Y轴样式不可见。
显示范围:Y轴的数据最小值和最大值的显示范围。
参数 | 说明 |
最小值 | Y轴的最小值,支持自定义输入,也支持系统选择数据最小值,取数据中的最小值。 |
最大值 | Y轴的最大值,支持自定义输入,也支持系统选择数据最大值,取数据中的最大值。 |
轴线:柱图的Y轴轴线样式,包括线的形状、线的粗细和线的颜色,可单击
图标控制Y轴轴线样式的显隐。
轴标题:柱图的Y轴轴标题样式,可单击
图标控制Y轴轴标题的显隐。
参数 | 说明 |
标题显示 | 轴标题显示的文字内容。 |
展示方式 | 轴标题的展示方式,包括标题的角度值和标题的偏移值。 |
文本样式 | 轴标题文本的字体样式、文字粗细、字号和颜色。 |
轴标签:柱图的Y轴轴标签样式,可单击
图标控制Y轴轴标签的显隐。
参数 | 说明 |
显示格式 | Y轴标签数值显示格式的样式,可选默认、11(整数)、11.1(浮点数)、11.11(浮点数)、11%(百分比)、11.1%(百分比)、1,111(千分位)和1,111.1(千分位)。更多数据显示格式请参见数据显示格式说明。 |
两端间距 | Y轴标签距离轴线两端之间的距离,单位%。 |
标签展示 | 标签的展示样式,包括:轴标签的数量、标签的前后缀内容、标签的角度值、偏移量和标签展示时候的对齐方式。 |
文本样式 | 轴标签文本的字体样式、文字粗细、字号和颜色。 |
刻度线:柱图的Y轴刻度线样式,包括刻度线的长度值、粗细值和颜色,可单击
图标控制Y轴刻度线样式的显隐。
网格线:柱图的Y轴网格线的样式,包括网格线的线型样式、粗细、颜色、长度和网格线之间的间距值,可单击
图标控制Y轴网格线的显隐。
动画:柱状图的动画效果样式。
交互:柱状图组件的交互效果样式。
轮播效果:开启轮播后,将应用提示框配置,且提示框不再通过交互触发。单击
图标控制轮播效果的显隐。
提示框:在预览或发布页面,鼠标悬浮或单击柱图时出现的提示框的样式,单击
图标可开启或关闭提示框 。
参数 | 说明 |
模式 | 提示框的模式,可选,包括简洁和通用。 |
触发方式 | 提示框被触发的方式,可选,包括悬浮和点击。 |
显示位置 | 提示框显示的位置样式,可选,包括上、下、左和右。 |
标题间距 | 提示框中标题之间的间距,单位px。 |
标题文本 | 提示框中标题文本的样式,包括字体样式、文字粗细、字号和颜色。 |
内容显示 | 当模式选择为通用时展示。单击右侧的 或 图标,添加或删除一个提示框内容显示系列。 单击 或 图标配置多个提示框内容显示系列的排列样式。单击 图标,即可复制当前选中提示框内容显示系列配置内容并新增一个同样配置的提示框内容显示系列。 |
内容间距 | 提示框内容文本之间的间距,单位px。 |
内容文本 | 提示框中内容文本的样式,包括文字字体样式、文字粗细、字号和颜色。 |
后缀 | 提示框中内容文本的后缀样式。 |
弹窗背景 | 提示框的弹窗背景样式。 |
轴指示器 | 提示框的轴指示器的样式,包括轴指示器的类型、粗细值和轴指示器颜色。单击 图标可开启或关闭轴指示器 。
说明 当线的类型选择虚线或点线时,还可以配置线的间断长度值和每一个间断线之间的距离。 |
激活区域 | 提示框的激活区域的样式,包括区域样式的填充色、透明度和宽度调整的附加值。 |
联通区域:柱子不同类目同一个系列数据之间联通区域的样式,通过悬浮和点击这两种类型触发,单击
图标,控制联通区域配置项的显隐。
选中态:当柱子被选中时候的状态样式,单击
图标可开启或关闭选中态样式 。
参数 | 说明 |
触发方式 | 柱子被选中触发的方式,可选,包括悬浮和点击。 |
选中方式 | 选中柱子的方式,可选,包括单选和多选。当选择单选时,单击事件只抛出一条数据,数据格式为对象,只能高亮一个柱子;当选择多选时,单击事件可抛出多条数据,数据格式为数组,可高亮多个柱子。 |
柱子颜色 | 柱子被选中状态下的颜色。 |
柱子描边 | 柱子描边线的样式,包括描边线条的类型、线条的粗细和描边线的颜色。 |
交互增强:区间柱状图的数据过多时可设置数据交互增强的样式,单击
图标可开启或关闭交互增强效果。
参数 | 说明 |
交互方式 | 数据交互方式,可选缩略轴和滚动条两种方式。 |
默认范围 | 缩略轴显示的数据范围,范围值可选0~1。只有开启了缩略轴样式时,此选项才显示。 |
滑轨样式 | 缩略轴滑轨的样式,包括滑轨的高度值、滑轨前景颜色和背景颜色。只有开启了缩略轴样式时,此选项才显示。 |
文本样式 | 缩略轴上文本的样式,包括字体内容、文字粗细、字号大小和文字颜色。只有开启了缩略轴样式时,此选项才显示。 |
手柄样式 | 缩略轴两端的手柄样式,包括手柄的宽度和高度值、手柄的背景默认颜色和高亮色颜色、手柄边线的圆角值和边线颜色。 |
滚条宽度 | 滚动条的宽度值,单位px。 |
滚条颜色 | 滚动条的颜色,包括滚动条的前景色和背景色。 |
图例:柱状图的图例样式。
参数 | 说明 |
图例开关 | 打开开关,可配置图例样式;关闭开关,无法配置图例样式。 |
图例位置 | 图例相对于组件起始坐标的位置,可选顶部居左、顶部居中、顶部居右、底部居左、底部居中、底部居右、左侧居顶、左侧居中、左侧居底、右侧居顶、右侧居中和右侧居底。 |
文本样式 | 图例文本的字体样式、文字粗细、字号和颜色。 |
分类图例 | 分类型图例的样式。只有当组件样式面板中的图形>柱子颜色>映射类型配置为名词分类时,图例才展示成分类型图例。 |
连续图例 | 连续图例的样式。只有当组件样式面板中的图形>柱子颜色>映射类型配置为数值连续或数值分区时,图例才展示成连续型图例。 滑轨样式 类型:图例滑动轨道的类型,包括矩形和三角形。 长度:图例滑动轨道的长度值。 高度:图例滑动轨道的高度值。 背景色:图例滑动轨道的背景颜色。
标注样式:图例上文字标注的样式。
|
标注:标注样式说明。
辅助线:单击右侧的
或
图标,添加或删除一个辅助线系列。 单击
或
图标配置多个辅助线系列的排列样式。单击
图标,即可复制当前选中辅助线系列配置内容并新增一个同样配置的辅助线系列。
类型:设置辅助线的类型,包括横线和斜线。
数据值:设置辅助线的数据值,包括平均线、中位线、最大值线和最小值线。
线型样式:设置辅助线的线型样式,包括辅助线的线型、粗细、长度、间距和颜色。
文本内容:设置辅助线的内容样式,包括文本、数据显示开关、旋转角度、水平和垂直偏移和对齐位置。
文本背景:设置辅助线的文本背景,包括背景的填充色、圆角半径。
文本样式:设置辅助线的文本内容的文本样式。
辅助框:单击右侧的
或
图标,添加或删除一个辅助框系列。 单击
或
图标配置多个辅助框系列的排列样式。单击
图标,即可复制当前选中辅助框系列配置内容并新增一个同样配置的辅助框系列。
端点位置:设置辅助框的起始点横/纵坐标和终止点的横/纵坐标。
背景填充:设置辅助框的背景颜色。
线型样式:设置辅助框的线型样式,包括辅助框的线型、粗细、长度、间距和颜色。
区域着色:设置辅助框系列的区域着色颜色值,扫光动画或柱子背景色开启时失效。
文本内容:设置辅助框的内容样式,包括文本、水平和垂直偏移、旋转角度和显示位置。
文本背景:设置辅助框的文本背景,包括背景的填充色、圆角半径。
文本样式:设置辅助框的文本内容的文本样式。
柱子样式:单击右侧的
或
图标,添加或删除一个条件样式。 单击
或
图标配置多个条件样式的排列样式。单击
图标,即可复制当前选中条件样式配置并新增一个同样配置的条件样式。具体的条件样式配置说明,请参见条件树使用说明。
数据源面板
字段 | 说明 |
x
| 用于配置柱状图中每个柱子的类目,即x轴的值。 |
y
| 用于配置柱状图中每个柱子的值,即y轴的值。 |
colorField
| (可选)颜色映射字段,用于设置柱子的各种颜色的映射配置样式。 |
数据项配置 | 说明 |
数据源 | 组件的数据源中通过代码编辑或可视化编辑展示了组件所包含的数据字段。也可以修改数据类型,灵活配置组件数据。 |
数据映射 | 当您需要自定义图表字段配置时,可以在数据映射模块设置不同的字段映射内容,将这些字段映射到组件对应的字段上。无需修改数据源中的字段,就可以实现数据的实时匹配。也可以单击 图标对字段分别样式配置。 |
过滤器 | 打开过滤器,选择已创建的数据过滤器或新建数据过滤器,并配置数据过滤器脚本,实现数据的筛选功能。详情请参见管理数据过滤器。 |
数据响应结果 | 实时展示了组件所使用的数据。当组件数据源发生变化时,数据响应结果会对应展示最新的数据。如果系统反应延迟,您可以单击右侧的 图标,查看数据响应结果,也可以单击右侧的 图标,获取组件的最新数据。您也可以单击查看示例,查看当前组件的响应结果示例。 |
禁止加载态 | 勾选复选框,在组件更新和预览数据看板时,将看不到组件初始化时的加载内容,去勾选则相反。默认为去勾选状态。 |
受控模式 | 勾选复选框,组件初始化状态下不请求数据,仅通过全局变量或蓝图编辑器配置的方法发起请求数据;去勾选复选框,可以使用自动更新请求数据。默认为去勾选状态。 |
自动更新请求 | 勾选复选框,可以手动输入轮询的时间频次设置动态轮询。清除后则不会自动更新,需要手动刷新页面,或通过蓝图编辑器和全局变量事件来触发请求更新数据。 |
高级面板
交互 | 说明 |
当数据项选中时 | 打开开关,开启组件交互功能。柱状图组件拥有交互配置,当单击选中某个数据项时抛出临时变量,默认抛出数据中的x 和y 字段。具体配置请参见组件交互配置。 |
当图例被点击时 | 打开开关,开启组件交互功能。柱状图组件拥有交互配置,当单击某个图例时抛出临时变量,默认抛出数据中的value 和checked 字段。具体配置请参见组件交互配置。 |
蓝图交互
单击页面左上角的
图标,进入蓝图页面。
在图层节点页签下,添加当前组件至主画布中。
查看蓝图配置参数。![image.png](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/9561460071/p740491.png)
事件
事件 | 说明 |
当柱状图接口请求完成时 | 数据接口请求返回并经过过滤器处理后抛出的事件,同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。 |
当数据项选中时 | 当单击柱状图的柱子时抛出的事件,同时抛出该柱子对应的数据项。 |
当图例被点击时 | 当单击柱状图的图例时抛出的事件,同时抛出该柱子对应的数据项。 |
动作
动作 | 说明 |
导入柱状图接口 | 按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。 |
请求柱状图接口 | 重新请求服务端数据,上游数据处理节点或图层节点抛出的数据将作为参数。例如柱状图配置了API数据源为https://api.test ,传到请求柱状图接口动作的数据为{ id: '1'} ,则最终请求接口为https://api.test?id=1 。 |
高亮 | data:需要高亮的数据项。 style:选中样式。如:fillStyle、stroke、opacity等;高亮样式不传入时,使用默认样式(配置中选中态的样式)。 参考数据示例 {
"data": {},
"style": {}
}
|
重置选择项 | 清空重置组件选择项数据,不需要参数。 |
移动 | 将组件移动到指定位置,参考数据示例。 {
// 移动方式。绝对定位:to,相对定位:by。默认值:to。
"positionType": "to",
// 指定位置。x坐标,y坐标。
"attr": {
"x": 0,
"y": 0
},
// 动画方式。
"animation": {
"enable": false,
// 动画延时,单位ms。
"animationDuration": 1000,
// 动画曲线。可选值为:linear|easeInOutQuad|easeInOutExpo。
"animationEasing": "linear"
}
}
|
切换显隐 | 切换组件显示或者隐藏,不需要参数。 |
显示 | 显示组件,参考数据示例。 {
"animationType": "",//动画方式,可选值:fade,不填无动画。
"animationDuration": 1000,//动画延迟,单位ms。
"animationEasing": ""//动画曲线
}
|
隐藏 | 隐藏组件,参考数据示例。 {
"animationType": "",//动画方式,可选值:fade,不填无动画。
"animationDuration": 1000,//动画延迟,单位ms。
"animationEasing": ""//动画曲线
}
|
更新组件配置 | 动态更新组件的样式配置。需要先在组件的样式面板中,单击复制配置到剪贴板,获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。 |
常见问题
配置过程中,图表显示空白如何排查?
首先前往查看返回数据是否符合格式要求。若数据正确,前往查看配置项是否存在不适合配置。例如具有colorField字段的图表,颜色映射类型配置是否正确;检查需要贴图的图表,是否开启贴图。
图表效果不符合预期,是否可以定制?
DataV-Board支持两种形式的个性化定制开发:自定义组件和看板二次开发。
图表版本不是最新版本,如何更新升级?
当图表版本更新后,对于已存在的图表组件提供一键升级版本功能。选中组件,在组件配置处找到更新版本按钮,按界面指引操作即可。大版本不同(即x.y.z 中的 x 不同),没法直接升级获得,需要重新添加。
![image](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/4380743371/p872238.png)
图表文字字号多少适合?在不同分辨率的设备上如何适配好?
PC端看板默认分辨率为1920x1680,移动端看板可自定义调整分辨率。系统为每种图表提供默认字号大小,若您觉得字体不适合,可在中找到图表字号,统一缩放字体。详情请参见批量修改组件字体。