【转贴】数据可视化图表和表格的设计经验分享（一）！...

图表设计

1. 图表设计概念

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

下面分析三种常用的数据可视化图表折线图、柱状图、饼图的设计。

1.1折线图

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

下图的两个折线图是有问题表现形式：


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

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

下图修改后折线图，折线幅度占3/2的位置，数据表现清晰合理。



合理的折线图表的X轴数值范围应根据折线的数值增减变化而变化，这需要跟前端工程师说明，做成动态计算。

下图又是两个有问题的折线图：



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

刻度线与折线的设计：



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

1.2柱状图

理想很丰满，现实很骨感，有时候我们设计的图表数据进来后，跟设计完全不一样，看下图的设计稿跟数据进来后的样子：



解决的方案就是让工程师把X轴刻度不要写死，应该把这些图表的取值范围写成动态计算的。

动态计算就是，例如数据的最高值为18，X轴最高数值应该为25，当数据又上升一定的高度后，X轴再上升到相应的数值高度，这样避免了如右图的问题。



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

解决方案就是换一种形式，如下图：



解决方案

柱状图直接的位置设计：



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

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

1.3饼图

饼图的设计：



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

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

表达重要数据，如下图：



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

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



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

学习了，感谢楼主