箱型图

简介

箱形图（英文：box plot），又称为盒须图、盒式图、盒状图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因图形如箱子，且在上下四分位数之外常有线条像胡须延伸出去而得名。它主要用于反映原始数据分布的特征，还可以进行多组数据分布特征的比较。它能显示出一组数据的最大值、最小值、中位数、及上下四分位数。当有数值与上下四分位数的范围差距 1.5×IQR 以上时，该值为离群值（outlier）。离群值会有时会画成个别的点。

图表构成

箱形图由箱形图元（箱形图元是一种特殊图元，基于VGrammr Glyph 图元封装）及其他组件构成。

箱型图元为箱型图的基本要素，要想绘制出完整的箱型图元，下列绘制配置必不可少:

boxPlotChart.type: 图表类型，箱形图的类型为'boxPlot'
boxPlotChart.data: 图表绘制的数据源
boxPlotChart.xField: x 轴字段，当direction: 'vertical'时，映射图元的 x 坐标
boxPlotChart.yField: y 轴字段，当direction: 'horizontal'时，映射图元的 y 坐标
boxPlotChart.minField: 数值字段，表示数据最小值，映射箱型图元最下边界线
boxPlotChart.q1Field: 数值字段，表示数据四分位数，映射箱型图元箱体的下边界
boxPlotChart.medianField: 数值字段，表示数据中位数，映射箱型图元箱体的中间线
boxPlotChart.q3Field: 数值字段，表示数据上四分位数，映射箱型图元箱体的上边界
boxPlotChart.maxField: 数值字段，表示数据最大值，映射箱型图元最上边界线

坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

boxPlotChart.axes: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，注意直方图不支持离散轴，因为直方图用于统计数据区间内的频率分布，主轴必须以数值区间的形式传入，离散轴不支持该功能。详情配置见VChart 坐标轴组件配置
boxPlotChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart boxPlotChart 配置

快速上手

关键配置

direction 属性配置为 'vertical'
minField、q1Field、medianField、q3Field、maxField 分别声明数据中的最小值、下四分位数、中位数、上四分位数、最大值字段

箱型图特性

数据

一个离散 字段，如: x
五个数值字段，如: y1 y2 y3 y4 y5

数据定义如下：

data: [
  {
    name: 'boxPlot',
    values: [
      {
        x: 'A',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      },
      {
        x: 'B',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      },
      {
        x: 'C',
        y1: 5,
        y2: 8,
        y3: 10,
        y4: 12,
        y5: 20
      }
    ]
  }
];

布局

分组箱型图

类似于分组柱状图，分组箱型图可以看做不同的箱型系列以间隔排列的方式组合在一起，每组箱型系列代表一个类别。在 VChart 中，需要在xField中追加字段（此时xField以数组形式存在），该字段用于区分数据类别，即对同一维度的箱型进行拆分，拆分成若干组以间隔排列的方式展开。并且为了区分同一维度下间隔排列的箱型，需要指定boxplotChart.seriedField字段，该字段默认映射箱型图元颜色。