数据可视化大屏计划拭魅战分享

本文作者从现实事变出发，团结案例分享了大屏可视化计划进程中的一些题目以及计划思绪，供各人一路参考与进修。

年底完成了一些数据可视化网页版UI改革及大屏可视化计划的方案，最近空出一些时刻来清算碰着的题目及计划思绪，本文分享一下设法和感悟。

重点概览：

1. 相识数据可视化
2. 图表计划指南；
3. 详细计划思绪；
4. 大屏优化计划
5. 总结

一、相识数据可视化

可视化是为了辅佐用户更好的说明数据，信息的质量很洪流平上依靠于其表达方法。

数据自己是酷寒的数字，通过选择吻合的图形可能图表来举办展示表达，使得转达给行使者的感觉越发直观、更轻易得到个中的代价。

数据可视化将技能与艺术美满团结，借助图形化的本领，清楚有用地通报与雷同信息。一方面，数据赋予可视化以代价;另一方面，可视化增进数据的灵性，两者相辅相成，辅佐企业从信息中提取有代价的信息。

二、图表计划指南

在数据可视化计划中，起首面对的题目是怎样将各类繁多的数据指标举办展示，必要按照数据的特点，以及数据之间的相关，抉择选择什么样的图表范例，然后梳理数据包括的维度，最终突出要害信息。

如下图，通过对数据展示需求举办归类清算，并调研行业内的主流办理方案，将数据展示需求分为以下几种范例：

三、详细计划思绪

数据可视化的目标是让数据措辞，让伟大抽象的数据以视觉的情势更精确的通报。简朴的来说就是既要选择吻合的图表，又要展示个中的数据相关，通过视觉元素有序组合浮现数据特性。

下面来举些栗子～

1. 数目的图表展示对付数目展示，首要包括以下几种行使场景

• 纯数字应用于详细的总数展示场景，譬喻XXX个数为1000台，XXX个数为99条等，这里把纯数字置于视觉控件中，能让观者直观相识到个数几多台、条数有几多条；
• 数字翻牌器应用于舆图中个各个指标总数表现的展示场景，譬喻XXX个数为88个等；
• 折线图暗示一段时刻内数据的变革，譬喻XXX在1-7月中每个月的数目增减环境、XXX在最近一周内数目增减环境等；
• 横向柱状图是首要是通进程度偏向差异颜色的柱子来展示数值，此类数值一样平常有正负相关，一样平常展示资源总量与已行使量、未行使量比拟的场景中，譬喻XXX的总量800pb、已分派量500pb、未分派量300pb三者之间的资源数目的比拟等；

2. 趋势的图表展示首要行使场景

折线图是指定一个说明轴举办数据巨细的较量，首要是展示数据跟着时刻推移的趋势或变革，两点毗连。譬喻展示最近6个小时的两种数值变革趋势等。

3. 占比类数值的图表展示首要行使场景

环形图应用于部门占比环境展示，首要是通过展示差异种别数值相对付总数的占比环境，回响部门与整体的相关。每个地区弧长暗示种别巨细，总和为100%。

譬喻在环形图中，某资源占整个资源的30%。

4. TOP类数据的图表展示首要指各类指标的TOPN展示

好比TOP5的数值巨细排行。

5. 地区类的数据

地区类的数据展示在一张舆图图上展示各地区资源数目环境，有利于行使者调查全局以及各个地区的环境。

6. 网页版数据可视化计划样例

四、大屏优化计划

本次可视化大屏首要是为了及时展示相干数据监控环境，差异于网页版可视化计划的展示，大屏展示必要做到重点突出，要求较强的数据展示手段，而不是八面见光。

网页版方向展示一段时刻内的数据，乃至是通过日期筛选查询到某一时刻段的数据。大屏更多起到的是监测职能，反馈的是及时信息，表现的是当下的数据。以下是大屏计划和网页版计划的一些差异：

1. 机关和配色：计划尺寸

硬件尺寸：

6384*1216px，判别率：72dpi计划机关相识需求的基本上，分辨数据的优先级，做到重点突出，细分资源范例及指标，机关出大抵的计划模版，如下图。

字体：

配色：

对较量网页版计划展示，大屏更倾向于选用深色调配景，不只为了让视觉更好聚焦，并且长时刻寓目之后眼睛也不会呈现视觉刺刺痛感。

基于此，全部图表的配色皆以深色系为配景，担保数据明度与色调的调和同一。

数据元素：

图标：

2. 展示和交互

在大屏展示中，有多种资源范例及数据展示。通过构图突出重点，在首要信息和次要信息的机关和所占面积长举办调解，明晰层级相关和流向，使观者获守信息时也能得到视觉均衡感。

以舆图的方法展示出资源漫衍信息，阁下两侧排布具体类此外资源信息展示，在构图上突出主次。并在世界舆图中省份位置添加钻取的动态结果，进一步加强视觉导流线和信息层级的引导浸染。

差异于网页版可视化内容展示可以做到八面见光，大屏界面空间有限，必需突出重点，将重要的指标放在最显眼的位置，只管齐集安排，吸引视觉核心。

交互方面，网页版可视化内容展示的交互伟大相对多样化。而可视化大屏，交互样式单一，更多是偏重于数据多维度钻取。

3. 优化细节

在完成大屏计划初稿后，为了进一步优化维度和揭示的方法，对大屏中的细节举办优化。譬喻对配景、装饰线框、图表线条等细节举办检察。

好比视觉上显得线条太多，页面整体不足清楚，重要信息凸显不出来。对应装饰元素能停止则停止。

对付条理感不明明的题目，举办了富厚信息以及加大配景致比拟度的调解；对付图表中柱状图的数目过密和过疏，举办长宽高、面积举办调解；对付表格排罗列办优化序号突出重点的调解……

最后一步，凭证产物司理网络到需求方的要求，思量到是否到达预期，是否有色差等。最后也要让需求方考核是否可以或许领略，数据是否是想要的样子。

优化后的最终版：

五、总结

数据可视化计划的出力点就是要掌握好图表的主次相关，突出首要图表的重点数据。

本次计划拭魅战，在网页版UI计划基本上，提炼重点数据信息举办大屏计划，最终目标是可以或许让观者洞悉各个资源的行使环境。

在本次计划拭魅战必要在短时刻内实现伟大繁多的指标数据可视化，网页版要做到八面见光，大屏版要做到重点突出，整体计划不免有不美满的处所，后续会继承改造完美。

本文素材来自互联网

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!