箱形图(BoxPlot)

### 什么是箱线图？
箱形图是一种基于五个数字摘要显示给定统计数据集的可视化表示：最小值、第一个四分位数（25%）、中值（第二个四分位）、第三个四分之一（75%）和最大值。此类图表对于比较不同类别的值分布非常有用。箱形图也被称为盒须图、盒式图或箱线图。

这些图表包含方框和须线（从最小值到四分位数 1 以及从四分位数 3 到最大值的垂直或水平线）。

### 箱形图有什么用？
箱形图提供了潜在大数据集的简明易懂的摘要。它们作为一种简单的方法来可视化数据集中值的统计分布和分布，以不同的箱形图形状和位置显示此数据的五数字摘要。箱形图还用于比较不同类别的这些值。

请记住，您也可以使用更少的度量来创建箱线图。例如，您可以仅可视化最小值、中值和最大值。

### 箱线图与条形图
箱形图和条形图之间的主要区别在于箱形图对比例/定量变量很有用。他们处理中位数和四分位数。

而条形图和图表对于定性/分类变量很有用。他们处理计数。

在本箱形图指南中，我们将介绍箱线图的数据格式。我们还将向您展示如何使用一些示例代码创建基本的箱线图，以及如何对其进行自定义，进一步探索不同的选项。

### 箱形图数据格式
boxPlot 的数据格式与其他图表略有不同。ApexCharts 假定您的数据采用 [Min, Q1, Median, Q3, Max] 格式，如下例所示。

#### xy格式
xy 格式接受 `[{ x: category/date, y: [min, q1, median, q3, max] }]`。

```javascript
  chart: {
    type: "boxPlot"
  },
  series: [{
    data: [{
      x: "category 1",
      y: [40, 51.98, 56.29, 59.59, 63.85]
    },
    {
      x: "category 2",
      y: [43.66, 44.99, 51.35, 52.95, 59.42]
    },
    .
    .
    .
    {
      x: "category n",
      y: [52.76, 57.35, 59.15, 63.03, 67.98]
    }]
  }]
```

### 自定义 boxPlot 的颜色
#### 箱形图四分位数范围颜色

默认情况下，向上四分位数为绿色，向下四分位数为蓝色。您可以通过设置以下选项来更改这些颜色

```javascript
plotOptions: {
  boxPlot: {
    colors: {
      upper: '#5C4742',
      lower: '#A5978B'
    }
  }
}
```

上面的颜色设置会产生下面的结果

#### 水平箱线图
只需更改单个属性即可水平呈现箱形图。

```javascript
plotOptions: {
  bar: {
    horizontal: true
  }
}
```

水平箱线图的示例。

#### 添加散点系列作为离群值
如果您需要向箱形图中添加离群值，则需要通过散点图类型的另一个系列来完成。下面的代码说明了代码的外观。

```javascript
chart: {
  type: 'boxPlot'
},
series: [{
  type: 'boxPlot'
  data: [...],
}, {
  type: 'scatter',
  data: [...]
}]
```

带有离群值的箱形图示例。