线性回归图

文档基于线性回归图v1.5.21版本

组件说明

线性回归图主要用于表现两种或两种以上变量间的线性关系。图表存在一个点集,用一条曲线去拟合其分布的过程。主要的构成元素有:数据源(函数折线或散点)、横纵坐标轴、变量名及研究的对象。

效果案例

*线性回归图 效果案例

一、样式

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

1、子组件管理

参考线

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

样式

配置项

说明

纵轴选择

可选择Y轴或Z轴

边距

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

线样式

可选择实线或虚线

颜色

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

粗细

线样式的粗细

数据样式

配置项

说明

标签内容

自定义填写标签内容

文本样式

参考线标签的字体样式

偏移

参考线标签的偏移位置

颜色

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

粗细

线样式的粗细

数值

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


数据

组件数据格式

字段

说明

value

值,即参考线数值

*组件数据格式说明

JSON数据案例

[
	{
		"value": 125
	}
	
]

2、基本属性

位置尺寸

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

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

*尺寸调整不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏

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

3、全局

全局中支持配置组件边距外间距图例数据动画等样式。

边距

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

*边距样式说明


外间距

曲线与图表外围的间距,取值范围0-1。

*外间距说明


图例

在图例中可以调整组件的文本样式图标尺寸间距布局点击交互未选中样式

a. 文本样式

可对文本样式按需修改


b. 图标尺寸

自定义图例图标尺寸,线性回归图默认方形。


c. 间距

用来调整图例图标文字之间的间距。

d. 布局

布局中支持进一步调整图例列数间距位置偏移

配置项

说明

列数

图例的列数

间距

图例之间的行距以及列距

位置

图例的展示位置

偏移

通过x轴和y轴控制偏移量

e.点击交互

开启点击交互后,可通过点击标签筛选并显示对应数据,关闭该功能后无法进行点击交互。

同时,可在未选中样式中配置透明度来区分未选中时的样式。

*点击交互 - 未选中样式

*点击交互 - 效果演示

数据动画

默认开启状态,首次加载兼数据变化时可显性展示出数据更新的过程。

*数据动画 - 效果演示


4、坐标轴

组件坐标轴分为x轴、y轴、z轴,可通过启用来控制是否开启某一轴的数据。

如下图所示,当取消开启x轴后可以看到x轴和x轴的相关配置项消失。

*启用x轴

X轴

通过启用控制X轴显隐,可通过轴标签轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

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

轴线

X轴的轴线颜色和粗细

刻度

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

网格线

X轴的网格线样式分布

其中,X轴标签分为类目型时间型两个不同维度:

类目型:以类目为单位,标签名由数据源提供。

时间型:以时间为单位,如“2017-1-1”、“2017年01月01日”等,如下图

Y轴

通过启用控制Y轴显隐,可通过轴标签轴单位轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

Y轴轴标签配置,包括数据范围、刻度模式、文本样式、数据格式化、后缀内容和偏移量

轴单位

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

轴线

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

刻度

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

网格线

Y轴的网格线样式

其中,Y轴标签支持以下刻度配置:

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

标签刻度支持开启刻度自适应或设置数量强制步长强制,非自适应情况下可自定义编辑标签、步长数量及小数位数;

*轴标签 两种刻度模式


Z轴

通过启用控制Z轴显隐,可通过轴标签轴单位轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

Z轴标签配置,包括数据范围、刻度模式、文本样式、数据格式化、后缀内容和偏移量

轴单位

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

轴线

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

刻度

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

网格线

Z轴的网格线样式

注意:当数据映射基于Z轴时,需在系列」中将纵轴选择切换至Z轴。



4、系列

当图表数据存在多类型展示需求时,组件默认将数据划分成多个系列,用户可通过对各系列数据进行自定义数据映射,从而完成对每个系列配置相应样式。

其中,数据系列操作支持:

:增加一个系列数据

:删除一个系列数据

:调整系列的显示格式(纵向展示、横向展示)


数据系列

配置项

说明

映射

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

纵轴选择

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

类型

改变指定系列的数据样式,真实值为折线分布,预测值为散点分布

折线

改变指定系列的折线颜色、粗细、曲线张力、null值连接等

散点

改变指定系列的散点半径、颜色及边框颜色、粗细

其中,通过映射将数据源信息映射至相应系列,「字段名」对应数据源相应系列“s”字段值;「显示名」则可按需命名。

*系列 - 数据映射 字段名和显示名

null值连接默认开启,当数据源中某一数据存在null值,折线部分支持选择是否将null值连接。

*null值连接 效果演示


5、提示框

悬停触发

支持鼠标焦点移入到对应的数据点后会显示当前对应的数据提示框。

*悬停触发 提示框效果


提示框

提示框整体分为两部分,提示框样式框内数据

组成

说明

提示框样式

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

框内数据

提示框内的数据,支持修改标签、行高、数据的文字样式

行高

提示框内每个数据值间的行高

*框内数据 对应样式配置


二、数据

组件数据格式

字段

说明

x

值,即x轴文本

y

值,即y轴数值

s

系列

*组件数据格式说明

JSON数据案例

[
	{
		"x": 146,
		"y": 20,
		"s": "系列一"
	},
	{
		"x": 160,
		"y": 28,
		"s": "系列一"
	},
	{
		"x": 188,
		"y": 64,
		"s": "系列一"
	},
	{
		"x": 200,
		"y": 70,
		"s": "系列一"
	},
	{
		"x": 146,
		"y": 14,
		"s": "系列二"
	},
	{
		"x": 148,
		"y": 24,
		"s": "系列二"
	},
	{
		"x": 153,
		"y": 21,
		"s": "系列二"
	},
	{
		"x": 155,
		"y": 31,
		"s": "系列二"
	},
	{
		"x": 158,
		"y": 24,
		"s": "系列二"
	},
	{
		"x": 160,
		"y": 31,
		"s": "系列二"
	},
	{
		"x": 165,
		"y": 45,
		"s": "系列二"
	},
	{
		"x": 167,
		"y": 28,
		"s": "系列二"
	},
	{
		"x": 171,
		"y": 48,
		"s": "系列二"
	},
	{
		"x": 173,
		"y": 46,
		"s": "系列二"
	},
	{
		"x": 177,
		"y": 50,
		"s": "系列二"
	},
	{
		"x": 179,
		"y": 45,
		"s": "系列二"
	},
	{
		"x": 180,
		"y": 66.5,
		"s": "系列二"
	},
	{
		"x": 184,
		"y": 62,
		"s": "系列二"
	},
	{
		"x": 186,
		"y": 55,
		"s": "系列二"
	},
	{
		"x": 188,
		"y": 70.5,
		"s": "系列二"
	},
	{
		"x": 190,
		"y": 61,
		"s": "系列二"
	},
	{
		"x": 192,
		"y": 59.5,
		"s": "系列二"
	},
	{
		"x": 194,
		"y": 69,
		"s": "系列二"
	},
	{
		"x": 197,
		"y": 63,
		"s": "系列二"
	},
	{
		"x": 199,
		"y": 70,
		"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复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群