图表类型与数据可视化速查表
选对图表类型是数据可视化的第一步。本页列出最常用的图表类型、适用场景以及应该避免的情况，帮助你把数据讲清楚而不是误导读者。
原理解析
图表不是装饰，而是把数据关系「翻译」成人眼能快速理解的形状。选图先问三个问题：要展示趋势、占比、分布还是对比？数据是一维还是多维？受众需要精确读数还是整体印象？
折线图适合时序趋势，柱状/条形图适合类别对比，饼图只适合少数互斥占比，散点/气泡图揭示相关性，热力图表现密度。选错图（如用饼图比 20 个类别）会让读者误读甚至得出相反结论。
什么时候该查这张表
这张表在你要给一组数据挑图表类型时有用。它按「最适合」与「避免使用」两列给出取舍，覆盖柱状图、折线图、饼图、散点图、热力图、箱线图等常见类型。选型时先看数据的形态与你要传达的问题。
不该查的情况：你在做图表的视觉设计（配色、字号、图例位置、坐标轴范围）或交互设计（缩放、悬浮提示）。本表只解决「用哪一类图」，不解决「怎么把它做好看」。
判断标准：先看你要读者回答什么问题。比较不同类别的量 → 柱状图；看趋势随时间变化 → 折线图；看部分占整体的比例 → 饼图或堆叠柱；看两个变量的相关性 → 散点图。这一条比任何样式规则都重要。
特别注意饼图的使用边界：它只适合表达一个维度下的比例，且分类通常不超过 5 个。需要比较多个维度的比例、或者分类超过 5 个，饼图都会失效 —— 改用堆叠柱状图或分组柱状图。
边界与常见陷阱
饼图的滥用是最常见的可视化错误
人眼判断角度与面积的能力远差于判断长度（位置编码最强），所以饼图在两个相近扇形之间的比较极不可靠。规范做法是：分类数 ≤ 5 且只有一个比较维度时才用；表达同一维度的多层比例改用 100% 堆叠柱；需要精确比较数值一律改柱状图。有一句经验很实用：如果用户会问「A 比 B 大多少」，就该用柱状图。
折线图的横轴不一定是时间，也不该用平滑曲线制造假象
折线图只要求横轴是有序的连续量，时间只是最常见的一种；把离散序号画成折线会暗示不存在的连续趋势。更重要的是插值：spline 平滑会让曲线在数据点之间产生实际上不存在的起伏，读者会误以为那段区间真有波动。默认应使用直线段连接，只有在横轴确实连续且采样足够密时才考虑平滑。
双轴图容易造成两个序列的相关性错觉
把两个量级不同的序列画在左右两个 y 轴上时，只要调整两个轴的缩放范围，就能让两条曲线看起来同步、交叉或背离 —— 而这完全由轴范围决定，与数据无关。这类图在新闻与报告中常被用来暗示不存在的因果或相关性。可行的替代：先归一化到同一尺度画双线，或改用散点图（x 为自变量、y 为因变量），后者天然表达真实关系。
与相邻内容的分工
要生成具体的图表，本页只给选型判断；生成与导出用站内图表生成器类工具。
要处理图表的响应式尺寸、主题适配与懒加载，属前端实现范畴，本表不覆盖。
要评估配色是否满足无障碍对比度，需用专门的对比度校验方法，本页不涉及。
若目的是判断某个真实场景该用什么图，关键是明确「读者要回答什么问题」，本页的判断标准可作为起点。
实战片段
要点：① 选型从「读者要回答什么问题」出发，而不是从数据形状出发；② 饼图只在「单维度 + 分类不超过 5 个」时可用，需要精确比较一律改柱状图；③ 双轴图的视觉关系完全由两个轴的缩放决定，与数据无关，容易制造假相关，改用归一化双线或散点图；④ 折线图默认用直线段连接，平滑插值会造出数据里不存在的起伏；⑤ 折线图的横轴只需「有序连续」，把离散序号画成线会暗示不存在的连续趋势。
// ① 按「读者要回答什么问题」选型
function pickChart(question, data) {
if (/多少|大小|比较|compare|how many/.test(question)) {
return data.length <= 5 ? 'bar' : 'line' // 多序列看趋势用线
}
if (/趋势|随时间|变化|trend|over time/.test(question)) return 'line'
if (/占比|构成|比例|share|proportion/.test(question)) {
return isSingleDimension(data) && categories(data).length <= 5
? 'pie' // ✅ 单维度 + ≤5 类
: 'stackedBar' // 否则用 100% 堆叠柱
}
if (/相关|关系|correlat|relationship/.test(question)) return 'scatter'
if (/分布|离群|distribution|outlier/.test(question)) return 'boxplot'
return 'bar' // 兜底：柱状图是最不容易出错的选择
}
// ② 饼图的两个前提（不满足就别用）
function pieIsSafe(cats, dims) {
return dims === 1 && cats.length <= 5
}
// ③ 双轴图的反面：改用归一化或散点
// ❌ 两条线各自一个 y 轴，缩放范围决定视觉关系
// ✅ 方案 A：归一化到同一尺度
const norm = series.map(s => s.map(v => (v - min) / (max - min)))
// ✅ 方案 B：散点图（x 自变量、y 因变量），关系由数据本身决定
scatter(data.map(d => ({ x: d.a, y: d.b })))
// ④ 折线图：默认直线段，不用 spline
// ❌ smooth: true —— 插值会造出数据里没有的起伏
// ✅ 默认折线 + 数据点标记
line(points, { smooth: false, showPoints: true })
// ⑤ 分类 > 5 时饼图失效
const cats = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
console.log(pieIsSafe(cats, 1)) // false ⇒ 改用 stackedBar实践注解
- 饼图超过 6 类就失去可读性人眼对角度差异的分辨能力弱于长度，扇区一多就无法比较。超过 6 类应改用横向条形图并降序排列，或把尾部合并成「其它」——这不是审美问题，而是会不会读错的问题。
- 折线图的横轴顺序代表真实时间间隔吗若横轴是分类而非连续时间，等距排列会让读者误以为间隔相同。真实时间间隔不均时必须用时间轴（或改用柱状图），否则趋势斜率是假的。
- 双轴图极易制造虚假相关性把两条量纲不同的曲线叠在左右两个 Y 轴上，只要调整刻度范围就能让它们「看起来同步涨跌」。必须做双轴时应固定刻度并明确标注，或改用两个上下对齐、共享横轴的小图。
数据来源
- General data-visualisation practice (no single external specification)
上述编号、名称与定义均来自公开规范，本站不主张对规范数据本身的独创性；本页的编排方式、中文释义与实践注解由本站撰写。
| 图表类型 | 最适合 | 避免使用 |
|---|---|---|
| 折线图 | 时间序列、趋势、连续数据（股价、访问量、温度变化） | 类别无顺序、只需要比较单点数值 |
| 柱状图 | 不同类别之间的数值比较（销售额按地区、人口按国家） | 类别过多、需要显示累计占比 |
| 条形图 | 类别名称很长、需要便于阅读标签的横向排版 | 时间序列、需要强调趋势 |
| 饼图 | 展示整体中各部分占比（分类不超过 5–7 个） | 类别过多、扇区大小接近难以区分 |
| 环形图 | 与饼图相同，中间可放总数或关键指标 | 需要精确比较各段大小 |
| 散点图 | 展示两个连续变量之间的相关性（身高 vs 体重、广告费 vs 销售额） | 数据点太少、变量不连续 |
| 面积图 | 强调累计量或随时间变化的幅度（累计用户、库存总量） | 多个系列重叠严重、需要精确读数 |
常见问题
柱状图和折线图应该怎么选？
看横轴含义：横轴是时间或连续变量 → 用折线图，强调趋势；横轴是离散类别 → 用柱状图，强调相互比较。不要把无顺序的类别连成折线，这会误导读者认为类别之间存在连续变化。
饼图为什么不能随便用？
人眼对角度和面积的敏感度远低于对长度的敏感度。当扇区数量超过 5–7 个或大小接近时，饼图很难让人准确判断比例。此时应改用柱状图或表格。
数据可视化最重要的原则是什么？
准确优先于美观：选择最能忠实表达数据特征的图表类型；减少不必要的装饰（3D、阴影、渐变）；保持坐标轴从 0 开始（尤其是柱状图），避免截断纵轴造成视觉误导。
折线图可以有很多条线吗？
可以，但建议同时展示的系列不超过 3–5 条。系列过多会导致线条交叉混乱，读者难以追踪。必要时拆成多个小图或使用交互式高亮。