每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票如何根据不同的业务属性,在视觉展示中更好的赋能。
柱图的定义:
柱图,又称柱状图、长条图,是一种以长方形的长度为变量的统计图表。用来比较两个或以上的值(不同时间或者不同条件),只有一个变量,用于单一维度的数据集分析。
常规展示方式【如下 配图 1 】
正常情况下,图表完整展示是由4部分构成,分别是
1、图表主题,也就是标题区域;
2、数值展示区域;
3、品类展示区域;
4、标签区域。标签区域在单值图表的情况下是不显示出来的。
需要注意的是,在多值的情况下,标签区域是一个能和客户进行交互的区域,具有筛选、且支持多选的功能。
假设展示区域指定宽高为800px*600px,品类多且名称长。
首先,看下数据结构,表格展示【如下 配图 2 表格 】
首先,考虑和需求方沟通缩短类目名称,如果无法减少名称字数,下面介绍另外的两种解决方案。
方案一,在柱子展示适当时,【如下 配图 3 】。
类目名称高度起点一致,统一呈右下方倾斜,这种方式隐性引导性强,阅读省力,同时也满足了视觉表达的完整。
解决方案二,名称上下错开展示,【配图 3-1 】。
这种信息值和类目名称的对应,视觉匹配有难度,同时视觉展示效果也欠佳。
大家可以感受下,两种不同方式的阅读体验。
那么,如何根据不同的业务属性,在视觉展示中更好的赋能呢?
案例1——状态类。
应用场景多是集中管控告警、系统负载、网络时效类,等。
首先看下数据结构,表格展示【如下 配图 4 表格】
需求是将这些类目合理地展示出来
解析:这种展示状态类的,先去了解清楚它的状态分为哪些?
比如 「健康——绿色、亚健康——黄色、中健康——橙色、不健康——红色、」
正常情况下,数据所在哪个区域就该是展示什么颜色,视觉可以表现【如下 配图 5 】,柱体单色变化。
再丰富一步呢,可以【如下 配图 6】, 柱体渐变进行展示。
案例2——资源类。
应用场景多是资产统计等。
首先看下数据结构,表格展示【如下 配图 7 】
需求是将这些类目合理地展示出来
解析:这类展示统计的,先了解展示数据值的单位为“率”还是“个”。
“率”,所有值相加为一个整体,各个类目所占比例,饼图最为合适;
“个”,就不能使用饼图了,用柱图来表示的话毫无新意。
这里推荐考虑单值数据可替换的图表,气泡图,最为合适。【如下 配图 8 】
气泡大小根据值进行设定,所在区域内的位置可以为程序员实现,随意展示会显活泼,显活力。
案例3——TOP排名类。
应用场景多是资源占用排名、网络延时排名、双十一销售品类排名、等。
首先看下数据结构,表格展示这样子【配图 9 】。
需求是将这些类目合理地展示出来
解析:这类展示TOP排名的,先了解数据是否具有实效性,数据多久刷新一次。
这种柱图的量值会逐渐递增,有时递增的速度也很迅速。
所以这里的思路是:
首先,建议直接选取一个颜色,进行单色渐变,透明度由40——>100,在配合光效,很容易达到醒目吸睛的目标效果。
其次,这种TOP需求,也是推荐考虑单值数据可替换的图表,横向条形图。要注意的是,横向条形图的值是按照数量大小来进行排列展示的,这样易聚焦且更直观的读取前三名的信息。
大家还有什么样的其他案例吗?
欢迎留言、讨论、一起玩转数据可视化的视觉表达。
Powered by Froala Editor
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论