Box

简介

箱线图（Box）又称盒须图、盒式图，是一种用于展示一组数据分布情况的统计图表。箱线图通常包含以下几个关键统计值：

最小值：数据集中的最小值（不包括异常值）
下四分位数（Q1）：数据集中排在 25%位置的值
中位数（Q2）：数据集中排在 50%位置的值
上四分位数（Q3）：数据集中排在 75%位置的值
最大值：数据集中的最大值（不包括异常值）

box 标记的特殊之处在于，它的 y 通道对应的数据是一个包含这些统计值的数组，Ant Design Charts 会将这些数据映射为箱线图所需的 14 个点集合，形成完整的箱线图图形。

箱线图的点集合结构

box 标记内部会将数据映射为以下 14 个点的集合，形成完整的箱线图：

p0           p2          p1
   ──────────┬──────────
             │
             │
             │
             │ p3
p4 ┌─────────┴──────────┐ p5
   │                    │
   │                    │
p8 ├────────────────────┤ p9
   │                    │
   │        p10         │
p7 └─────────┬──────────┘ p6
             │
             │
             │
  ───────────┴───────────
p12         p11           p13

代码演示

更多示例详见箱线图

基础用法

颜色映射

分组箱线图

高阶标记

通过 boxType: 'boxplot' 指定，默认值为 box。

box 标记与 boxplot 标记的区别在于：

box 是原子标记，需要开发者手动指定 5 个统计点的数据
boxplot 是高阶标记，自带数据分组和数据统计聚合功能

因此，box 更适用于后端对超大数据进行计算和统计之后的可视化展示，而 boxplot 更适合用于前端数据的探索和分析过程。

径向箱线图

配置项

概览

配置项	说明	类型	默认值
data	数据	Array	[]
xField	横轴字段	string	-
yField	纵轴字段	string \| string[]	-
seriesField	多折线图区分字段	string（可选）	-
colorField	和 seriesField 类似，不过会加上颜色通道，详见color	string（可选）	-
boxType	标记类型，可选值为 `box` 和 `boxplot`。 `box` 是原子标记，需要开发者手动指定 5 个统计点的数据; `boxplot` 是高阶标记，自带数据分组和数据统计聚合功能；	box \| boxplot	`box`
title	用于指定图表的标题内容，详见标题	object（可选）	-
axis	用于建立数据与视觉位置的映射关系，详见坐标轴	object（可选）	-
legend	图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选，详见图例	object（可选）	-
scrollbar	用于过滤数据，可以和 x 或者 y 通道绑定，详见滚动条	object（可选）	-
slider	用于过滤数据，让用户在数据量较大的情况下一次只用关注局部的数据，是一种辅助看数据的组件，详见滑块	object（可选）	-
label	数据标签是给图表添加标注的手段之一，详见标签	object（可选）	-
tooltip	用于动态展示数据点的详细信息，详见提示	object（可选）	-
style	视觉样式，配置项详见绘图属性	object（可选）	-
theme	用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见主题	string \| object（可选）	`light`
onReady	图表加载回调，用于后续的事件事件绑定	Function（可选）	-
scale	将抽象数据映射为视觉数据，详见比例尺	object（可选）	-
animate	动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见动画	object（可选）	-
interaction	提供了按需探索数据的能力，详见交互	object（可选）	-
state	实现交互反馈、高亮、选中等效果，详见状态，不同交互下图表样式	object（可选）	-
annotations	视图好比一个画板，`Box` 组件默认在其上绘制了一个箱线图，我们可以通过 annotations 在上面叠加更多的图层，详见标注	Array（可选）	-

data

data 的数据类型取决于 boxType，更多参考图表示例。

box: yField 映射的字段需要包含 [min, q1, q2, q3, max]
boxplot: 对更具 xField 映射的字段进行聚合，聚合后至少能满足 [min, q1, q2, q3, max, [Outliers]] 的要求

事件

详见选项-事件。

方法

详见图表概览-图表方法。

简介