箱型图

1. 简介

箱型图是一种用作显示一组数据分布情况的统计图。因图形如箱子，且在上下四分位数之外常有线条像胡须延伸出去而得名。箱形图于 1977 年由美国著名统计学家约翰·图基发明。它能显示出一组数据的最大值、最小值、中位数、及上下四分位数。

2. 效果展示

箱型图.gif

3. 样式

在样式中可以设置箱型图组件的位置、颜色、坐标轴、提示信息和动画等。

接下来，会用以下示例数据对组件样式进行说明：

大洋洲	欧洲	亚洲	南美州
1	1	2	1.5
5	3	5	4
6	5	6	28
15	7	8	36
17	9	9	15
25	15	11	12
24	13	17	9
12	21	26	18
0	0	0	50

3.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
抽样率	1）对数据进行抽样展示。如有 100 条数据，抽样率为 100%，此时会显示 100 条数据，如抽样率为 50％，则只显示 50 条数据；	2）这个设置项主要是在数据量过多、组件显示效果不佳时，可以借助这个选项来减少数据量，但是与此同时部分数据也会不显示，所以要谨慎使用。

箱型图 透明度变化，如下图所示：
透明度.gif

3.2 颜色

指示组件的填充颜色。给组件的 Y 轴字段配置数据后，可以对这些字段单独进行颜色设置。

箱型图 示例数据颜色，如下图所示：

箱型图 更换数据颜色，如下图所示：

3.3 X 轴

配置项	说明
数据类型	有3 种类型，分别是分类、连续数值和时间，数据类型的选择根据导入的数据源而定。
轴线	X 轴的线条类型、颜色及粗细的配置。
轴刻度线	X 轴的刻度线颜色、粗细及长度的配置。
轴刻度值	X 轴的轴标签位置、距轴线的位置、字体设置、外发光展示设置及旋转角度的配置。

3.4 Y 轴

配置项	说明
轴线	Y 轴的线条类型、颜色及粗细的配置。
轴刻度线	Y 轴的刻度线颜色、粗细及长度的配置。
轴刻度值	Y 轴的轴标签显示格式、计数单位、小数设置、刻度值范围和颜色、大小，字体设置和外发光显示设置，其中轴刻度值支持系统自适应，也支持自定义值范围。
显示轴单位	Y 轴的轴标签的单位，可调整单位内容和字体样式。

【温馨提示】要注意Y 轴的轴刻度值设置，轴刻度值显示格式有两种：数值和百分比，注意选择和数据相对应的格式。轴刻度值设置有两种：自适应和自定义，在自定义的时候要注意最小、最大刻度值的设置，必须比数据的值大。

3.5 缩略轴

缩略轴，是一个辅助查看数据的组件，开启缩略轴后可以看数据全貌，也可以看具体的数据内容，最主要的是可以拖拽缩略轴观察数据在一定区间内的演变。
缩略轴.gif

3.6 网格线

网格线易于查看和计算数据，在这里可以对组件的 X 轴、Y 轴的网格线进行设置，包括线条类型和粗细、线条颜色和粗细等内容。

3.7 辅助线

辅助线是一种参考线、分界线，设置辅助线的位置可以对数据分布形态进行分割和归纳，使得数据分布形态及趋势更加明显。当线条类型为虚线时，可以设置 Y 轴的虚线粗细。

例如，将辅助线线条位置设置为30，此时组件上会出现一条供参考的分界线，帮助我们查看以数据“30”为分界的数据分布形态。

3.8 图形形状

图形形状描述的是组件中图形边框的宽度，“自适应”和“自定义”选项中没有可对组件产生作用的设置参数。

3.9 图形文本

图形文本是将每个子条形的数值或百分比显示在组件的图形上面。

箱型图 图形文本样式，如下图所示：

3.10 图例

鼠标移动到图表中会出现每条数据的具体内容，可以了解每项代表的意思。图例设置包括图例位置、颜色、大小及偏移量。

【温馨提示】图例不会随着组件大小变化而变化，但会遮住组件具体内容，此时需要调整组件的内边距以达到内容的完整展现。

3.11 内边距

内边距可以设置组件中心距离上下左右边框各自的位置，单位为px。
边距.png

3.12 提示信息

提示信息指的是鼠标移动到组件上时显示的信息，提示信息样式包括：提示框样式、文字样式和数据格式的设置。
提示信息.gif

3.13 展示设置

可以设置组件中数据的展示形式，组件的展示形式有 2 种：滚动展示和轮播展示。未开启循环播放时，动画只在启动全屏时播放一次，开启循环播放之后才会按照间隔时间循环播放动画。

3.14 大小＆位置

通常我们可以通过直接点击和拖动组件来设置大小和位置，在这里也可以通过直接输入X 坐标、Y 坐标、宽和高来设置。

配置项	说明
组件大小	组件的 X、Y 轴坐标，X 坐标为组件左上角距离页面左边界的像素距离，Y 坐标为组件左上角距离页面上边界的像素距离。
组件位置	即组件的宽度和高度，单位为px。
组件旋转	三维空间旋转可以输入任意数值，数值对应角度向 X 轴/Y 轴旋转。

位置.png

3.15 边框设置

在此处可以对组件边框的边框颜色、宽度、图形边框圆角半径等样式进行配置。

3.16 背景设置

组件默认没有背景颜色，如果需要设置背景颜色，可以在此处进行设置，也可以将背景设置为一张图片或视频，可以选择填充方式和模糊程度。

箱型图 无背景色样式，如下图所示：

箱型图 有背景色样式，如下图所示：

4. 交互

交互功能为组件赋予了在一定条件下与大屏操作进行交互的能力。

【温馨提示】详细的交互设置请参考设置交互教程。

5. 数据

对数据进行配置可以让组件根据相应的数据显示对应的图形，目前，山海鲸可视化软件支持导入文件数据、连接数据库、连接 API、连接山海鲸数据管家等多种数据连接方式。

5.1 字段设置

在组件中，取值字段可包含多个字段，每个字段代表组件中的一个图形。

上图中所用示例数据如下：

大洋洲	欧洲	亚洲	南美州
1	1	2	1.5
5	3	5	4
6	5	6	28
15	7	8	36
17	9	9	15
25	15	11	12
24	13	17	9
12	21	26	18
0	0	0	50

5.2 动态数据项

使用动态数据，可以更灵活地对组件中的每一个样式属性做设置。

【温馨提示】详细的动态数据项设置请参考设置动态数据项教程。

5.3 数据联动

假设有 2 个表单分别为表单 A、表单 B，将 A 表单里某个字段的值作为查询条件，关联引用出 B 表单的数据，并填写到指定的字段中，就是数据联动。

联动项	说明
联动其他组件	开启数据联动后，单击一个图表中的任一数据点，其他使用相同数据集的图表也会随其联动变化。
受其他组件联动	开启数据联动后，图表中的数据会随发起联动的组件的变化而变化。

【温馨提示】详细的数据联动设置请参考设置数据联动教程。

5.4 数据筛选

将满足条件的数据通过筛选过滤出来。

筛选条件	说明
不筛选	不进行数据筛选。
筛选数据源指定行	可选择筛选数据源某一行数据。
选择数据条件	可自行选择数据筛选的条件。

【温馨提示】详细的数据筛选设置请参考设置数据筛选教程。

6. 代码

通过添加JavaScript 文件，可以满足对组件进行二次开发的需求。

例如，我们希望组件能够自动在大屏上向右移动，只需添加相应的JavaScript 文件即可实现，以下为本教程使用的示例代码：

/**
 * Extension.prototype.element;
 * Extension.prototype.enabled;
 * Extension.findExtensionsOfClass(className)
 * Element.prototype.setOption()
 * Element.prototype.getOption()
 * Element.prototype.getFullData()
 * Element.prototype.name
 */
class Button{
  update(){
    const position = this.element.getOption(
      ["position"]
    );
    // 当前元素在X轴上移动一定的距离
    this.element.setOption(
      ["position"],
      [(position[0] + 1 )%100,position[1]]
    );
  }
}
export default Button;