请选择 进入手机版 | 继续访问电脑版
分享
查看: 800|回复: 1

[分享] 【转贴】数据可视化图表和表格的设计经验分享(一)!...

[复制链接]

【转贴】数据可视化图表和表格的设计经验分享(一)!...

发表于 2021-4-9 13:53:16 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon800 zzr_icon1 查看全部
图表设计

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图这种情况一般很少出现,因为关注的是检出数值,展示未检出数据实为鸡肋,可能是极少情况的需要吧!

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

【转贴】数据可视化图表和表格的设计经验分享(一)!...

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



avatar

9

主题

29

帖子

141

积分

注册会员

Rank: 2

积分
141
爱学习的小同学 发表于 2021-4-13 18:14:38 显示全部楼层
学习了,感谢楼主
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t