前言

自从跟大家分享第一篇，很多小伙伴都会问我一些相关的问题，看了小伙伴给我发的视觉稿，整体都还不错，但是发现图表的设计都有一些问题，大家可能对数据可视化的图表设计经验少一些，所以这篇文章就挖掘一下图表的细节表现，分享我曾经遇到过的坑和对图表设计的理解。

图表设计

图表设计概念

图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现，也是数据可视化的核心表现，图表设计既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。

下面分析三种常用的可视化图表设计：

折线图

折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。

左图坐标轴设定的太低，折线变化过于陡峭，图中数值区间为（10-34）数据可视化的表现过于夸大了折线变化的趋势。

右图坐标轴的数值设定的太高，则折线变化过于平缓，无法清晰的表现折线的变化。

合理的折线图应当占据图表的三分之二的位置，图表的X轴数值范围应根据折线的数值增减变化而变化，这需要跟前端小哥哥小姐姐说明，做成动态计算。

折线图的折线粗细要合理，过细的折线会降低数据表现，过粗的折线会损失折线中的数据波动细节，视觉上较难精准找到折线点的相应数值！我通常用两个像素的线，看起来比较合适！

右图刻度线颜色过重，影响图表数据的表现，零基线跟图表内的刻度线对比不够明显，整体很乱。零基线是强调起始位置的，一般要比图表内的线颜色凸出一些。

条形图/柱状图

理想很丰满，现实很骨感。这个案例是我之前在工作中遇到的问题，数据进来后，被吓到了，问题的原因是没有跟前端小哥姐沟通好，他们把X轴写死，导致出现这种问题，其实应该情况要把这些图表的取值范围写成动态计算的。

例如，以现在数值范围为例，数据的最高值为18，X轴最高数值应该为25，当数据又上升一定的高度后，X轴再上升到相应的数值高度，这样避免了如右图的问题。

坐标轴的标签文字最好能水平排列，当X轴标签文字过多时，不建议倾斜排列、上下排列、换行排列文字多了这样的展示大大降低了阅读性！下图给出两个解决方案，大大提高标签文字的阅读性！

解决方案

柱子之间过于分散就会失去数据之间的关联性，过密就会变得数据之间没有独立性更不利于舒适阅读。

当柱子为n时，柱子直接的距离建议与n相差不要太大，柱子靠边的距离，最好是柱子之间的一半的距离，这样视觉上最为舒适。

饼图

左1图，不建议在饼图内与百分比数值一起显示，饼图本身的形状和大小，文字过多时容易溢出，如果出现一个2%一个1%，就很难辨别图形指向，这样也就失去了数据可视化的意义，PPT通常有这样的设计样式，因为是个死图。

左3图，人的阅读习惯是从左到右，从上到下，所以数据从大到小排列，更有助于阅读，图形也更具美感！

当饼图为检出率，或者一些重要信息检测的重点关注数据，就不建议大小数据顺时针排列，左1图这种情况一般很少出现，因为关注的是检出数值，展示未检出数据实为鸡肋，可能是极少情况的需要吧！

右图对于类似检出率的数据最为合适，直观清晰，没有无用数据干扰！

当饼图的标签维度过多时，就不适合把数据围绕饼图一周展示，会很乱，不易阅读，解决方案如右图！

图表分类图

分享一张图表分类大全，保存起来，设计数据可视化产品，会有重要参考价值！

这张图由设计师Abela对图表的各种特征进行了大致的概括总结。