箱形图(BoxPlot)

什么是箱线图?

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

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

箱形图有什么用?

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

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

箱线图与条形图

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

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

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

箱形图数据格式

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

xy格式

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

  1. chart: {
  2. type: "boxPlot"
  3. },
  4. series: [{
  5. data: [{
  6. x: "category 1",
  7. y: [40, 51.98, 56.29, 59.59, 63.85]
  8. },
  9. {
  10. x: "category 2",
  11. y: [43.66, 44.99, 51.35, 52.95, 59.42]
  12. },
  13. .
  14. .
  15. .
  16. {
  17. x: "category n",
  18. y: [52.76, 57.35, 59.15, 63.03, 67.98]
  19. }]
  20. }]

自定义 boxPlot 的颜色

箱形图四分位数范围颜色

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

  1. plotOptions: {
  2. boxPlot: {
  3. colors: {
  4. upper: '#5C4742',
  5. lower: '#A5978B'
  6. }
  7. }
  8. }

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

水平箱线图

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

  1. plotOptions: {
  2. bar: {
  3. horizontal: true
  4. }
  5. }

水平箱线图的示例。

添加散点系列作为离群值

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

  1. chart: {
  2. type: 'boxPlot'
  3. },
  4. series: [{
  5. type: 'boxPlot'
  6. data: [...],
  7. }, {
  8. type: 'scatter',
  9. data: [...]
  10. }]

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