HTML本身不能直接画箱线图，需借助JavaScript库；Chart.js配合chartjs-chart-boxplot插件最简实现，但需预计算五数并按指定格式传入；Plotly.js原生支持且自动计算，适合高交互场景。
HTML 本身不支持直接画箱线图
HTML 是标记语言，没有绘图能力。所谓“HTML 做箱线图”，实际是用 HTML 搭结构、用 JavaScript 渲染图形——主流方案是 Chart.js、Plotly.js 或 D3.js。硬用纯 HTML+CSS 模拟箱线图（比如 div 拼宽度）只能展示静态示意，无法计算四分位数、处理异常值，也不响应数据变化。
用 Chart.js + chartjs-chart-boxplot 最简实现
这是目前对新手最友好的方案：依赖少、文档清、API 直观。注意必须额外引入 chartjs-chart-boxplot 插件（Chart.js 官方不内置箱线图类型）。
- CDN 引入顺序不能错：
Chart.js→chartjs-chart-boxplot→ 自己的脚本 - 数据格式必须是数组套数组：
[[min, Q1, median, Q3, max], [min2, Q12, ...]]，不是原始数据集 - 原始数据需自己算五数概括（可用
mathjs.quantileSeq或手写排序取值），Chart.js 不自动计算 - 示例片段：
<canvas id="boxPlot"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-boxplot"></script>
<script>
const ctx = document.getElementById('boxPlot').getContext('2d');
new Chart(ctx, {
type: 'boxplot',
data: {
labels: ['Group A', 'Group B'],
datasets: [{
label: 'Scores',
data: [[50, 65, 72, 80, 95], [45, 58, 66, 75, 88]]
}]
}
});
</script>
Plotly.js 更适合科研/交互场景
如果需要悬停看具体数值、缩放、多子图或导出高清图，Plotly.js 是更稳的选择。它原生支持箱线图，无需插件，但包体积比 Chart.js 大。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 数据传原始数组即可：
[12, 15, 18, 22, 25, 28, 35]，内部自动计算五数和离群点 - 离群点默认显示，用
boxpoints: 'outliers'控制；设为false可隐藏 - 注意
layout.yaxis.autorange建议设为true，否则异常值可能被截断 - 调用方式简洁：
Plotly.newPlot('div-id', [{type: 'box', y: [1,2,3,...]}])
别踩这些坑
三个高频翻车点：
立即学习“前端免费学习笔记（深入）”；
-
chartjs-chart-boxplot版本要匹配 Chart.js v3+（v4 不兼容），查 GitHub README 的 peerDependencies - 传错数据结构：把原始数据直接塞进
data而不是预计算的五数数组 → 图表空白或报Cannot read property 'length' of undefined - 没初始化 canvas 容器高度 → 箱线图压成一条线，加 CSS：
canvas { height: 300px !important; }（Chart.js 默认按 canvas 标签宽高缩放）
真正麻烦的从来不是画出来，而是怎么从原始数据里干净地抽五数、怎么让离群点定义符合业务规则（比如 IQR × 1.5 还是 × 3）、以及响应式缩放时 box 宽度是否自适应——这些得自己写逻辑兜底。
