箱形图是一种基于五个数字摘要显示给定统计数据集的可视化表示:最小值、第一个四分位数(25%)、中值(第二个四分位)、第三个四分之一(75%)和最大值。此类图表对于比较不同类别的值分布非常有用。箱形图也被称为盒须图、盒式图或箱线图。
这些图表包含方框和须线(从最小值到四分位数 1 以及从四分位数 3 到最大值的垂直或水平线)。
箱形图提供了潜在大数据集的简明易懂的摘要。它们作为一种简单的方法来可视化数据集中值的统计分布和分布,以不同的箱形图形状和位置显示此数据的五数字摘要。箱形图还用于比较不同类别的这些值。
请记住,您也可以使用更少的度量来创建箱线图。例如,您可以仅可视化最小值、中值和最大值。
箱形图和条形图之间的主要区别在于箱形图对比例/定量变量很有用。他们处理中位数和四分位数。
而条形图和图表对于定性/分类变量很有用。他们处理计数。
在本箱形图指南中,我们将介绍箱线图的数据格式。我们还将向您展示如何使用一些示例代码创建基本的箱线图,以及如何对其进行自定义,进一步探索不同的选项。
boxPlot 的数据格式与其他图表略有不同。ApexCharts 假定您的数据采用 [Min, Q1, Median, Q3, Max] 格式,如下例所示。
xy 格式接受 [{ x: category/date, y: [min, q1, median, q3, max] }]
。
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]
}]
}]
默认情况下,向上四分位数为绿色,向下四分位数为蓝色。您可以通过设置以下选项来更改这些颜色
plotOptions: {
boxPlot: {
colors: {
upper: '#5C4742',
lower: '#A5978B'
}
}
}
上面的颜色设置会产生下面的结果
只需更改单个属性即可水平呈现箱形图。
plotOptions: {
bar: {
horizontal: true
}
}
水平箱线图的示例。
如果您需要向箱形图中添加离群值,则需要通过散点图类型的另一个系列来完成。下面的代码说明了代码的外观。
chart: {
type: 'boxPlot'
},
series: [{
type: 'boxPlot'
data: [...],
}, {
type: 'scatter',
data: [...]
}]
带有离群值的箱形图示例。