多色散点图是散点图的一种,使用散点来展示数据,适用于展示离散数据的差异。支持设置 X 轴、Y 轴、R 轴以及多系列数据配置等。本文介绍多色散点图的各配置项。
说明:
编辑组件时,先使用鼠标单击选中组件。
设置属性
位置大小
图示 | 工具项 | 说明 |
| 大小n | 设置组件的宽与高,单位为 px。 单击 图标,可锁定组件的宽高比,等比例调整组件的宽高。再次单击图标,可解锁组件的宽高比,调整宽高将不受等比例限制。 |
| 位置 | 设置组件的坐标位置,单位为 px。 横坐标为组件左上角与画布左边界的距离。 纵坐标为组件左上角与画布上边界的距离。 |
| 旋转 | 手动输入角度值,可调整组件的旋转角度。 拖动 图标内的小圆点,可调整组件的旋转角度。单击 图标,可设置组件左右或上下翻转样式。 |
图表
基础配置
用于设置多色散点图的样式。
描边宽度:设置基础散点边的宽度。
坐标轴
X 轴
图示 | 工具项 | 说明 |
| 标题n | 文本:设置 X 轴的标题文字。 字体字号:设置 X 轴标题的文字字体和字体大小。 文字颜色:设置 X 轴标题的文字颜色。 文字样式:设置 X 轴标题的文字样式,可选项包括:默认值、斜体、倾斜。 文字粗细:设置 X 轴标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。 间距:设置 X 轴标题与 X 坐标轴间的距离。n |
| | 位置:设置 X 标题的位置,可选项包括:顶部、底部、左侧与右侧。 数据类型:设置 X 坐标值的数据类型,可选项包括:数值型、时间型、类目型与自动类目型。 数值型:用于连续数据 时间型:用于连续的时序数据 类目型:用于离散的类目数据 自动类目型:用于离散的类目数据,支持自动聚合类标签 |
| 标签 | 显示格式:设置坐标轴刻度标签的显示格式。 字体字号:设置坐标轴刻度标签的文字字体和字体大小。 文字颜色:设置坐标轴刻度标签的文字颜色。 文字样式:设置坐标轴刻度标签的文字样式,可选项包括:默认值、斜体、倾斜。 文字粗细:设置坐标轴刻度标签的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。 文字行高:设置坐标轴刻度标签的文字行高。 角度:设置坐标轴刻度标签的显示角度,可选项包括:水平、垂直、倾斜。 间距:设置坐标轴刻度标签的与坐标轴间的距离。 大小:设置坐标轴刻度标签的宽与高。 水平对齐:设置坐标轴刻度标签的水平对齐方式,可选项包括:左对齐、水平居中、右对齐。 垂直对齐:设置坐标轴刻度标签的垂直对齐方式,可选项包括:顶部对齐、垂直居中、底部对齐。 超出宽度:设置坐标轴刻度标签超出宽度时的处理方式,可选项包括:截断、换行、强制换行。 超出高度:设置坐标轴刻度标签超出高度时的处理方式,可选项包括:显示、截断。 截断省略符:设置坐标轴刻度标签被截断时显示的省略符号,可设置为空。 |
| 单位 | 单位文本:设置坐标轴上显示的单位文字。 字体字号:设置坐标轴单位的文字字体和字体大小。 文字颜色:设置坐标轴单位的文字颜色。 文字样式:设置坐标轴单位的文字样式,可选项包括:默认值、斜体、倾斜。 文字粗细:设置坐标轴单位的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。 间距:设置坐标轴单位与坐标轴间的距离。 |
| 轴线 | 宽度:设置坐标轴线的宽度。 颜色:设置坐标轴线的颜色。 |
| 刻度 | 数量:设置坐标轴的刻度数量。 长度:设置坐标轴的刻度线长度。 宽度:设置坐标轴的刻度线宽度。 颜色:设置坐标轴的刻度线颜色。 |
| 刻度范围 | 最小值:设置坐标轴刻度的最小值,小于最小值将被隐藏。 最大值:设置坐标轴刻度的最大值,大于最大值将被隐藏。 |
| 刻度偏移 | 最小值偏移:设置坐标轴刻度的最小值偏移值。 最大值偏移:设置坐标轴刻度的最大值偏移值。 |
| 网格线 | 宽度:设置图表网格线的宽度。 颜色:设置图表网格线的颜色。 类型:设置图表网格线的显示类型,可选项包括:实线与虚线。 装饰: 形状:设置图表的装饰形状,显示于网格线与折线图交接处,可选项包括:圆形与方形。 大小:设置图表网格线装饰形状的大小。 |
Y 轴
Y 轴配置项同 X 轴配置项。
R 轴
图示 | 工具项 | 说明 |
| R 轴 | 最小值:设置半径的最小值,可选范围:[10,300] 最大值:设置半径的最大值,可选范围:[10,300] |
系列
图示 | 工具项 | 说明 |
| 数据系列n | 配色方案:n将选择的色系自动映射为多个系列的多色散点图颜色。 系列: 映射字段:设置系列的值与名称,其中系列 s 值表示 s 字段对应的值,不同的值对 颜色:设置系列的多色散点图颜色。 描边颜色:设置系列的多色散点图边颜色。 添加系列:支持新增和删除系列,不同的系列可以自由设置系列属性。 |
辅助
图示 | 工具项 | 说明 |
| 标题 | 文本:设置多色散点图的标题文字。 字体字号:设置标题的文字字体和字体大小。 文字颜色:设置标题的文字颜色。 文字样式:设置标题的文字样式,可选项包括:默认值、斜体、倾斜。 文字粗细:设置标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。 文字行高:设置标题的文字行高。 对齐方式:设置标题的文字对齐方式,可选项包括:左对齐、居中对齐、右对齐。 位置:设置标题显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。 间距:设置标题相对于图表和边界间的距离。 |
| 图例 | 图标形状:设置图例中各个系列的图标形状,支持圆形与矩形;其中图标颜色与系列折线颜色一致。 布局朝向:设置图例中各个系列的布局方向,支持水平显示和垂直显示。 字体字号:设置图例的文字字体和字体大小。 文字颜色:设置图例的文字颜色。 文字样式:设置图例的文字样式,可选项包括:默认值、斜体、倾斜。 文字粗细:设置图例的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。 文字行高:设置标题的文字行高。 位置:设置图例显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。 图标距离:设置图标与文字间的距离。 系列间距:设置图例中系列间的距离。 间距:设置图例相对于图表和边界间的距离。 |
设置数据
数据源
自定义函数
自定义函数用来对数据源中的数据做处理,需要使用 JavaScript 代码。其中入参
data
是数据源中的数据,返回值需要与数据源中“静态数据”的数据格式保持一致。可用于过滤数据、聚合数据、格式化数据等。字段映射
将数据源中返回的业务字段一一映射为图表提供的默认字段,图表字段的具体意思可查看字段前的问号图标。字段映射成功后,将在状态栏中显示映射成功。
自动更新
自动更新用于设置组件定时更新数据,在选择动态数据源或开启自定义函数的情况下该选项才可以设置。当勾选自动更新选项并输入定时时长(单位为秒),系统将根据设定的时长轮询数据源,获取最新数据并更新到相应图表中。