柱图的定义：

柱图，又称柱状图、长条图，是一种以长方形的长度为变量的统计图表。用来比较两个或以上的值（不同时间或者不同条件），只有一个变量，用于单一维度的数据集分析。

常规展示方式【如下 配图 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