编辑导语：在B端产品设计中，图表设计是常见的工作项目。合理有效的图表设计有助于数据抽象化、可视化，体现数据真实性，并传达相关信息。在本篇文章里，作者对B端图表设计可能出现的问题做了相应总结，一起来看一下。

这些天在帮网友看Ｂ端测试题，几乎每份都会涉及到可视化图表。我从中提炼出一些规律，将这些梳理总结出一份七宗罪走查清单，正如芒格先生所说“如果知道我会si在哪里，那我将永远不会去那个地方”，希望这份清单能帮助大家排雷扫障。

本文5480字，预计阅读时长20分钟，内含大量图表示例，建议PC端阅读。记得每次设计完图表后拿出来对照走查。阅读指引如下：

一、图表构成

清单中涉及一些专业词汇，为方便大家理解，我们先简单地认识一下图表构成。

图表设计规范同样由原子、分子、组件、模块、页面搭建而成，其中图表由多个组件构成，如数据标签、图例、图形主体、坐标系等。

标题：图表内容主题，包括主标题和副标题。可以是图表内容的概括，也可以是结论。

• 切换选项：用以切换同组对象的不同维度数据，如销售量与销售额。
• 数据标签：也叫提示信息，即当前数据的内容标注。数字型的数据标签，以通常以常驻形式存在于图表；气泡型/卡片型的数据标签，常以交互行为（点击、长按、悬停等）触发的形式出现。
• 图例：指图表内容与数据的符号或颜色说明，它既为绘图标准，又是图表的阅读指南。
• 工具（栏）：当前图表的操作项，例如编辑、刷新、导出、分享等。

• 坐标系：将抽象的数据关系映射到具象的图表上，该图表所处的空间维度叫做“坐标系”，用来确定数据空间位置的数组叫做“坐标”，例如（x，y）、（北纬N22°38′17.54″ ，东经E114°05′52.35）。坐标系包括坐标轴和标尺。
• 图形主体 ：用于数据视觉展现形式的图形，可以根据数据维度、数据差异，在同一图表使用不同图形绘制，例如常见的折柱混合、K线图。
• 网格：以标尺刻度为基准的参考线，用以辅助数据的快速定位。
• 值域：表示图表X轴的缩放大小，以及可视区域，多用于存在大量数据的情况。
• 映射域：表示图表Y轴的缩放大小，以及可视区域，多用于数据差异较大的情况。