堆叠柱状图

文档基于堆叠柱状图v1.6.1版本

组件说明

堆叠柱状图是柱状图的一种,通过将每个柱子进行分割以显示相同类型下各个数据的大小情况,支持自定义y轴区间、多系列数据配置以及堆叠式的数据展示。

效果案例

*堆叠柱状图 效果案例

一、样式

在样式中可以设置组件的参考线基本属性全局坐标轴系列提示框

1、子组件管理

参考线

参考线子组件可以设置线样式和数据样式

样式

配置项

说明

纵轴选择

可选择X轴或Y轴或Z轴

边距

自定义设置参考线的边距范围

线样式

可选择实线或虚线

颜色

线样式的背景颜色和透明度

粗细

线样式的粗细

虚线样式

格式使用半角字符

数据样式

配置项

说明

标签内容

自定义填写标签内容

文本样式

参考线标签的字体样式

偏移

参考线标签的偏移位置

颜色

线样式的背景颜色和透明度

粗细

线样式的粗细

数值

设置参考线数据的文本样式和偏移


数据

组件数据格式

字段

说明

value

值,即参考线数值

*组件数据格式说明

JSON数据案例

[
	{
		"value": 125
	}
	
]

2、基本属性

位置尺寸

位置包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明


默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。


3、全局

边距

基本柱状图表距离整个组件四边(上、下、左、右)的边距。

*边距样式说明

柱状样式

配置项

说明

柱状类型

柱子样式,可选择方形子弹头

系列间距

柱子间不同系列的间距,取值范围0-1,柱子粗细根据柱间间距自适应

柱间间距

每组柱子间的间距,取值范围0-1,柱子粗细根据柱间间距自适应

外间距

柱子与图表两侧的间距,取值范围0-1,柱子粗细根据柱外间距自适应

柱子背景

柱子的背景颜色、透明度

*柱间距说明


图例

配置项

说明

文本样式

图例的文本字体、字号、颜色、透明度、间距等

图标尺寸

图例的宽高尺寸

间距

图文的间距

布局

图例的布局方式,支持修改行列数、间距、九宫格排布、偏移量

点击交互

开启后可对单个系列值进行显示隐藏操作

未选中样式

修改未选中图例的透明度

*点击交互配置项说明


轮播动画

开启后图表数据进行轮播,可设置滚动时长和动画间隔。

数据动画

开启后首次加载和数据变化时会加载动画效果。

4、坐标轴

X轴

支持对柱状图的x轴显隐、样式编辑

配置项

说明

轴标签

X轴的轴标签,可调整格式、文本样式、展示方式和偏移量

轴线

X轴的轴线颜色和粗细

刻度

X轴的刻度线的颜色、粗细、长度

网格线

X轴的网格线样式、颜色、粗细

*X轴轴标签样式说明

Y轴

支持对柱状图的y轴显隐、样式编辑

配置项

说明

轴标签

y轴数值范围,支持自定义输入,也支持系统选择,置空时系统根据数据中的最大、最小值或其百分比和指标点的个数自动计算;

标签刻度支持自适应和数量强制或步长强制,非自适应情况下可编辑标签和步长数量,小数点位数;

支持修改后缀内容、偏移和文本样式。

轴单位

Y轴轴标签的单位,可调整单位内容、偏移量和文字样式

轴线

Y轴的轴线,支持修改颜色和粗细

刻度

Y轴的刻度线,可调整刻度线的颜色、粗细、长度

网格线

Y轴的网格线样式、颜色、粗细

*Y轴轴标签样式说明

Z轴

支持对柱状图的Z轴显隐、样式编辑

配置项

说明

轴标签

Z轴数值范围,支持自定义输入,也支持系统选择,置空时系统根据数据中的最大最小值和指标点的个数自动计算;

标签刻度支持自适应或数量强制步长强制,非自适应情况下可编辑标签和步长数量,小数点位数;

支持修改后缀内容、偏移和文本样式。

轴单位

Z轴轴标签的单位,可调整单位内容、偏移量和文字样式

轴线

Z轴的轴线,支持修改颜色和粗细

刻度

Z轴的刻度线,可调整刻度线的颜色、粗细、长度

网格线

Z轴的网格线样式

*Z轴轴标签样式说明

5、系列

数据系列

对数据有类型区分展示需求时,可以将数据划分成不同系列。

配置项

说明

映射

映射的字段名对应数据中的s系列字段,显示名是编辑页面中字段的变量名

纵轴选择

当有多个维度的数据需要展示时,支持对不同的系列选择不同轴向展示(前提:需同时开启Y、Z坐标轴)。

填充样式

改变指定系列的颜色、纹理

极值选择

对基本柱状图中的同一系列的数据中的最大值(最小值)高亮

头部装饰

上传图片可添加头部装饰,支持设置其尺寸和偏移

*数据系列配置项说明

数值标签

柱子内数据值的标签配置项。

配置项

说明

文本样式

数值标签的文本字体、字号、颜色、透明度、间距等

位置

数值标签显示位置,支持起点、居中、终点、终点外、图表外

偏移

数值标签的数字与柱子的偏移距离,数值越大,距离越远

后缀

数值后面可以添加后缀,支持对后缀的文本字体、字号、颜色、透明度进行设置。

*数值标签样式说明



6、提示框

自动轮播

启用后提示框进行自动轮播,可设置停留时间。

悬停触发

鼠标悬浮到对应系列上时,显示提示框。

提示框

字段

说明

提示框样式

柱状图的提示框,支持调整提示框的背景、尺寸、边距和偏移量

行高

每个数据值间的行高

框内数据

提示框内的数据,支持修改X轴标签、数据名称、数据值的文字样式

背景

可以上传图片设置提示框的背景

*提示框配置项说明

指示器

提示的高亮区域,支持修改颜色和宽度。

*指示器配置项说明

二、数据

组件数据格式

字段

说明

x

类目,即x轴文本

y

值,即y轴数值

s

系列

*组件数据格式说明


JSON数据案例

[
	{
		"x": "2010/01/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/01/01 00:00:00",
		"y": 320,
		"s": "系列二"
	},
	{
		"x": "2010/02/01 00:00:00",
		"y": 200,
		"s": "系列一"
	},
	{
		"x": "2010/02/01 00:00:00",
		"y": 120,
		"s": "系列二"
	},
	{
		"x": "2010/03/01 00:00:00",
		"y": 160,
		"s": "系列一"
	},
	{
		"x": "2010/03/01 00:00:00",
		"y": 180,
		"s": "系列二"
	},
	{
		"x": "2010/04/01 00:00:00",
		"y": 200,
		"s": "系列一"
	},
	{
		"x": "2010/04/01 00:00:00",
		"y": 160,
		"s": "系列二"
	},
	{
		"x": "2010/05/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/05/01 00:00:00",
		"y": 220,
		"s": "系列二"
	},
	{
		"x": "2010/06/01 00:00:00",
		"y": 180,
		"s": "系列一"
	},
	{
		"x": "2010/06/01 00:00:00",
		"y": 220,
		"s": "系列二"
	}
]


数据配置项说明

配置项

说明

数据源

数据源类型、数据源选择等

数据过滤器

勾选启用数据过滤器,单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见数据过滤器使用说明

数据响应结果

展示数据请求的响应结果

自动更新

选中后可以设置数据请求时间间隔


数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门


三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时,则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。


载入动画配置项:

配置项

说明

渐隐渐显

启用是

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms


回调参数

回调参数即为全局性的参数变量,用于控制组件之间参数的传递,可通过设置回调参数来实现数据驱动交互。

其中,字段值即参数变量,变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;

详细的自定义事件教学👉自定义事件教学


欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群 说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群