小编上次写了篇大屏数据可视化的文章《》，围绕布局排版、配色、点缀以及动态效果等方面，阐述了帆软的一些经验，文章中酷炫的大屏效果引起了很大反响，非常多热心的用户留言咨询是怎么做的。为了满足大家如此热忱的求知欲，小编今天就用实际案例来教大家按套路做。
上图是一张视觉设计稿，也是小编今天要教大家实现的内容。开做之前，我们先做点准备工作：确认需求、准备数据、整理素材。这里假定需求已由业务部敲定，数据IT部也整理好了，而需要的背景、边框等素材小编事先都整理过，如下图所示。
OK，准备工作就绪，那就开始动手了。按照上次帖子的总结，我们设计大屏驾驶舱遵循四个基本套路：1）布局排版2）色彩3）点缀效果4）动画。
一、&布局排版
业务部门的需求，是要重点展现集团销售总额数据以及各地区的数据，其他次要内容包括历年销售对比、各产品线销售、热门产品、实时交易、新老客户占比等。我们从常见的几种主次分布排版样式里挑选了一种作为此次的版面，如下图所示。
由于集团业务遍布全国，所以区域销售数据我们认为用地图展示比较直观，而全国的总销售额这一数字叠加在地图上进行展示。另外，对比类的数据适合用柱形图，占比类的数据适合用饼图，交易明细数据适合用表格。这样，我们就确定了布局里的几个主要元素：地图、数字、柱形图、饼图、表格。打开中，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据，如下图所示。
点击预览按钮，浏览器端的效果如下图所示。到这里第一版效果就出来了，主次排版让界面看上去很规范，但配色没有经过改良所以效果一般。
在上次帖子里，我们总结过，大屏的主体背景建议用深色系，这样可以有效避免视觉刺激。如此，我们把第一版demo背景调一下，小编从五个推荐的背景颜色里头随便选了一种（R6 G64 B102），得到第二版效果。
由于整体背景是深色的，使得我们的一些标题文字还看上去不明显，而且图表有种沉闷的感觉，小编稍微调整了下，把文字内容改成浅色、图表则换稍微明亮一点的颜色，得到第三版效果。
到第三版，其实demo已经做的差不多了，排版合理有层次、色彩也符合多数人的阅读习惯。但是，做人要有追求，不能就此止步，小编要把demo改造得更炫一点。根据上次帖子里的总结，用一些带有星空、条纹等的图片作为整体背景，可以让效果富有科技感。于是小编从自己事先整理的素材库里，挑选了几张图片进行尝试，果然分分钟变得高大上了呀。如下图所示第四版效果，顶部标题处的光耀有木有非常nice？ ！
在第四版效果基础上，我们还可以更进一步，为各个组件、标题添加一些边框来提升细节处的观感。
首先是改造顶部大标题，在大标题两侧各拖入一个报表块，为报表块添加背景图片（注意：添加的图片最好是对称的）。
预览，大标题改造后的效果如下，左右对称线条极大提升美感。
其次是改造各个组件的小标题，方法很简单，直接为小标题所在的报表块组件添加合适的背景就行。小编又又又从事先准备好的素材库里挑了个元素出来，最后选定效果如下。
再接下来，我们给各个组件添加边框元素，小编叒又从事先准备好的素材库里调了几个边框出来（现在知道为啥小编在文章开头就强调素材的重要性了吧），最后我们得到第五版效果如下。
在第五版效果之后，我们整个demo基本上可以交付了，但是由于大屏本身场景特殊，纯粹静态展示让人感觉大屏是死的，缺乏活力。为此，小编给demo加上一些动画效果，提升一下demo的活力及视觉观感。
首先我们来为销售总额设置数据监控，让其每隔1秒获取最新数据，这样销售总额数字会实时动态变化，操作如下图所示。
然后呢，再给图表添加闪烁动画，设置起来非常简单哈，不涉及到任何代码。
再接着，咱们来给地图添加一个数据监控，让各区域数据在地图上自动弹出提示。
最后，右下角的明细数据展示，小编觉得，如果用滚动轮播的形式会更好，于是就加上了。由此，第六版，也就是本次demo的最后一版终于可以交付啦，大家看GIF效果，求好评！！！
肿么样，是不是按照套路做大屏驾驶舱，很容易做出漂亮的效果呢？其实在第四步动效环境，我们还可以加入更多交互效果，比如地图钻取，点击某个省份穿透到市级地图；或者比如联动，点击左上角的区域排名柱形图，则产品类别占比饼图联动显示具体省份的数据。
其实，做任何事情都有一些基本的套路，就看你有木有用心发现、用心总结。如果你对大屏数据可视化感兴趣，有类似的项目需求希望合作，或者是有更多的想法和经验愿意跟我们分享，又或者是有任何的疑问，都可以在下方评论。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4244次
排名：千里之外
(1)(3)(2)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'后使用快捷导航没有帐号？
数据可视化的5个步骤
时间： 17:19
评论: 0素人渔夫
内容简介： 数据被称作是最新的商业原材料“21世纪的石油”。商业领域、研究领域、技术发展领域使用的数据总量非常巨大，并持续增长。
数据被称作是最新的商业原材料“21世纪的石油”。
商业领域、研究领域、技术发展领域使用的数据总量非常巨大，并持续增长。就Elsevier而言，每年从ScienceDirect下载的文章有7亿篇，Scopus 上的机构档案有8万个、研究人员档案有 1 千 3 百万，Mendeley上的研究人员档案有 3 百万。对于用户来说，从这个数据海洋中抓到关键信息越来越难。
这也是数据可视化的用武之处：用简单易懂的可视化方式总结并呈现大型数据集，为读者提供有价值的信息。
许多先进的可视化方式（如：网络图、3D 建模、堆叠地图）被用于特定用途，例如3D医疗影像、模拟城市交通、救灾监督。但无论一个可视化项目有多复杂，可视化的目的是帮助读者识别所分析的数据中的一种模式或趋势，而不是仅仅给他们提供冗长的描述，诸如：“ 2000 年 A 的利润比 B 高出 2.9 % ，尽管 2001 年 A 的利润增长了 25 % ，但 2001 年利润比 B 低 3.5 % ”。出色的可视化项目应该总结信息，并把信息组织起来，让读者的注意力集中于关键点。
对于 Elsevier’s Analytical Services 的项目而言，我们一直在寻找提升数据分析和可视化的方式。例如，在我们对于研究表现的分析中有大量关于研究合作的数据；我们为 Science Europe 提供的报告（Comparative Benchmarking of European and US Research Collaborationand Researcher Mobility）包含跨州合作以及国际合作的数据，这些数据不适合直接用二维表和X-Y图展示。为了探索数据背后的故事，我们使用了网络关系图来识别国家间的合作，并了解每个合作关系的影响。想了解我们的团队如何为政府部门、出资者、大学、研究者提供基于数据的材料，为研究方面的策略决定提供信息，可参阅 Telling stories with big data 一文。
本文提供一份包含五个步骤的数据可视化指南，为想用表格、图形来传播观察结果、解读分析结果的人士提供帮助。要记住，建立好的可视化项目是一个反复迭代的过程。
第1步- 明确问题 开始创建一个可视化项目时，第一步是明确要回答的问题，又或者试着回答下面的问题“这个可视化项目会怎样帮助读者？”表 1 – 数据集中的三条记录
图1-槽糕的可视化项目并不澄清事实，而是引人困惑。此图中包含太多变量。
清晰的问题可以有助于避免数据可视化的一个常见毛病：把不相干的事物放在一起比较。假设我们有这样一个数据集（见表1），其中包含一个机构的作者总数、出版物总数、引用总数和它们特定一年的增长率。图1是一个糟糕的可视化案例，所有的变量都被包含在一张表格中。在同一张图中绘制出不同类型的多个变量，通常不是个好主意。注意力分散的读者会被诱导着去比较不相干的变量。比如，观察出所有机构的作者总数都少于出版物总数，这没有任何意义，又或者发现 Athena University、Bravo University、Delta Institution 三个研究机构的出版物总数依次增长，也没有意义。拥挤的图表难以阅读、难以处理。在有多个Y轴时就是如此，哪个变量对应哪个轴通常不清晰。简而言之，槽糕的可视化项目并不澄清事实而是引人困惑。
第2步- 了解你的数据、从基本的可视化着手确定可视化项目的目标后，下一步是建立一个基本的图形。它可能是饼图、线图、流程图、散点图、表面图、地图、网络图等等，取决于手头的数据是什么样子。在明确图表该传达的核心信息时，需要明确以下几件事：我们试图绘制什么变量？
X 轴和轴代表什么？
数据点的大小有什么含义吗？
颜色有什么含义吗？
我们试图确定与时间有关趋势，还是变量之间的关系？
有些人使用不同类型的图表实现相同目标，但并不推荐这样做。不同类型的数据各自有其最适合的图表类型。比如，线形图最适合表现与时间有关的趋势，亦或是两个变量的潜在关系。当数据集中的数据点过多时，使用散点图进行可视化会比较容易。此外，直方图展示数据的分布。直方图的形状可能会根据不同组距改变，见图2。（在绘制直方图时，本质是在绘制柱状图来展示特定范围内有多少数据点。这个范围叫做组距。） 图2-当组距变化，直方图的形状也发生变化。
组距太窄会导致起伏过多，让读者只盯着树木却看不到整个森林。
此外，你会发现，在完成下一个步骤以后，你可能会想要修改或更换图表类型。
第3步– 明确要传达的信息，确定最能提供信息的指标假设我们有另一个关于某研究机构出版物数量的数据库（见表 2 ）。可视化过程中最关键的步骤是充分了解数据库以及每个变量的含义。从表格中可以看出，在 A 领域（Subject A），此机构出版了633篇文章，占此机构全部文章的 39% ；相同时间内全球此领域共出版了 27738 篇文章，占全球总量的 44% 。注意，B列中的百分比累计超过 100% ，因为有些文章被标记为属于多个领域。
在这个例子中，我们想了解此机构在各个领域发表了多少文章。出版数量是一个有用的指标，不仅如此，与下面这些指标对照会呈现出更多信息：此领域的研究成果总量（ B 列），以及此领域的全球活跃程度
由此，我们可以确定一个相对活跃指标，1.0 代表全球平均活跃程度。高于 1.0 代表高于全球水平，低于 1.0 代表低于全球水平。用B列的数据除以 D 列，得到这个新的指标，见表 2 。 表2- 用B列的数据除以D列，得到新的指标：相对活跃程度（E栏）。
第4步- 选择正确的图表类型 现在我们可以用雷达图来比较相对活跃指数，并着重观察指数最高/最低的研究领域。例如，此机构在 G 领域的相对活跃指数最高（1.8），但是，此领域的全球总量远远小于其他领域（见图 3 ）。雷达图的另一个局限是，它暗示各轴之间存在关系，而在本案例中这关系并不存在（各领域并不相互关联）。
图3-相对活跃指数雷达图
数据的规范化（如本例中的相对活跃指数）是一个很常见也很有效的数据转换方法，但需要基于帮助读者得出正确结论的目的使用。如在此例中，仅仅发现目标机构对某个小领域非常重视没太大意义。
我们可以把出版量和活跃程度在同一个图表中展示，以理解各领域的活跃程度。使用图 4 的玫瑰图，各块的面积表示文章数量，半径长短表示相对活跃指数。注意在此例中，半径轴是二次的（而图3中是典型线性的）。图中可以看出，B 领域十分突出，拥有最大的数量（由面积表示）和最高的相对活跃程度（由半径长度表示）。 图4- 玫瑰图。此图中各块面积表示文章数量，半径长短表示相对活跃指数（E列）。
第5步- 使用颜色、大小、比例、形状、标签将注意力引向关键信息 用肉眼衡量半径长度可能并不容易。由于在本例中，相对活跃指数的1.0代表此领域的全球活跃程度，我们可以通过给出1.0的参照值来引导读者，见图5。这样很容易看出哪些领域的半径超出参考线。 图5-带有相对活跃指数参考线的玫瑰图
我们还可以使用颜色帮助读者识别出版物最多的领域。如图例所示，一块的颜色深浅由出版物数量决定。为了便于识别，我们还可以把各领域名称作为标签（见图6）。 图6- 玫瑰图中的颜色深浅代表出版物数量（颜色越亮，出版物越多） 结论
数据可视化的方法有很多。新的工具和图表类型不断出现，每种都试图创造出比之前更有吸引力、更有利于传播信息的图表。我们的建议是记住以下原则：可视化项目应该去总结关键信息并使之更清晰直白，而不应该令人困惑，或用大量的信息让读者的大脑超载。（来源: 数据工匠）
上一篇：下一篇：
阅读排行HOT
大数据应用方案SOLUTION
精彩点评COMMENT
, Processed in 0.089088 second(s), 33 queries.阿里云43页PPT详解数据可视化大屏构建（技术干货）
注：本文系天善智能授权数据观发布，编辑：Fynlch（王培），来源阿里云o数加/数据头条。数据观微信公众号（ID:cbdioreview） ，欲了解更多大数据行业相关资讯，可搜索数据观（中国大数据产业观察网）进入查看。
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点百度：大数据营销与可视化设计（PPT） | 互联网数据中心-199IT | 中文互联网数据研究资讯中心-199IT
199IT高端交流群已有1800+资深用户，3800+份最新的各行业研究报告、欢迎您的加入。
扫描微信二维码,数据随身查添加微信公共帐号： i199it欢迎关注：欢迎关注：今日推荐&:&
大数据可视化分析
Tableau大中华区首席技术顾问刘琳珂谢谢各位。我的主要的演讲题目是关于大数据和可视化结合。所谓可视化，其实利用人的眼睛来去做某种事物的识别方法。那么对人的眼睛来讲，我们知道一个正常人的眼睛你可以很敏感去识别事物的位置，我和这个屏幕两个不同的位置，两个不同东西的颜色大小等等，都是人很容易识别两个因素，两个人站在这里谁高谁矮，这些东西都是可以被用来，结合了你的数据来帮助你判断什么好什么坏，你的客户哪个好，你的客户哪个坏，你的销售区域哪个好哪个坏，你的运维成本哪个部门高哪些部门低，你可以用可视化来做。我们Tableau用大数据做可视化的公司，他们在什么场景里头利用我们的工具来做大数据可视化分析。我是来自Tableau的刘琳珂。右边派德教授，《玩具总动员》、《魔界》、《阿凡达》，这三部电影特效是派德教授，他本身是我们公司三位创始人之一，三个系列的电影也都拿过奥斯卡金像奖，他少有做计算机互联网这个圈子里的人上台拿过奥斯卡奖的人。我们所做的事情利用工具把可视化和你的数据结合起来，进而让我们企业里头的领导、用户们能够有效的来去理解你的数据。大数据可视化，大数据的客户目前在大型金融、互联网、电信行业比较多，目前为止，如果从互联网行业来讲，谷歌、亚马逊、脸书、ebay本身用Tableau结合他们大数据来做几十几百TB级的可视化分析。全世界最大的公司，沃尔玛，拥有全世界最大的关系型数据仓库，它本身也是用Tableau来做大数据可视化分析。后边我就举一些不同例子来看一下你怎么可以在不同的场景下利用可视化来看到你的分析价值。第一个例子，这是一个网络分析的例子。现在我这上边放的网络分析图是什么？最核心点是我们公司，这是我们公司在推特上跟我们联系紧密度的一些人或者企业通过这个网络图你可以把它看出来，中间明显有一些点比最中央我们公司的点稍微小一些，但是它是一个密集的被人查看转载等等的一个网络重要节点。这些网络节点中的70%的部分，其实做这个的人主要想阐明这个问题，70%的部分并不是一些相关公司，而是在推特上这些热点人物是什么呢？他们是一些Tableau的重要的粉丝客户，一些用户中的一切一些大师他们在经常转载一些可视化数据分析有关文章并且被更多用户转载查看。下面一个例子做人口分析的例子。这个例子我把它放进来开生开生小孩，两个小孩政策。你可以看到这张散点图，横坐标是生育率，一个家庭生几个孩子，纵坐标，这个地方人口寿命，你可以想象这张图上越往上的点代表的这个地方人寿命越高，越往右说明这个地方生小孩越多，现在是1950年的状态，我们看看最近60年中发生了什么呢？时间不断推移，所有国家都在逐渐向着最左上边的坐标轴移动，全世界所有国家人民寿命越来越长，但是伴随着生孩子方面大家越生越少，你要看现在的统计资料是可以看到，我们平均生育率是1.6，但是这个点代表是中国，在中国左边还有很多点，还有很多国家没有实行计划生育政策，但是生的孩子比中国还少，这是为什么呢？这样互动式的分析，你在一张表格数据上你是很难得到你要分析的答案，关于人口问题分析是一个相当综合话题分析的结果。bnb，它做的生意模式，你家里有一间房子，收拾好了做客房，你在网上注册，如果有人在你这个地方& 选一个住宅，可能选中你，你已经是这个网站注册有房子可以承租的人，你就向租客提供相应的服务，所以bnb在全世界相当多的国家已经开展服务的网络民宿共享服务平台。目前这个例子是它最热的十个全世界的旅游城市里头来做的价格床位等级等等地理位置。我拿到的数据是纽约周边包括新泽西一部分这样的位置分析，这个颜色放的是什么？现在我选的指标是价格，越往橙红色说明这个地方房屋均价越高，住一天大概花多少钱，越蓝色相对低一些，但并不是越远离纽约核心区越便宜一些，不是这样，按照不同地方有不同的颜色变化，但是颜色变化最深，最偏红色是在曼哈顿岛的附近，这是比较符合大家认知。按照床位的数量按照其它互动因素会怎么样，这也没有关系。这个分析本身，其实要在十年前，现在在我笔记本上的bnb的分析是一个大数据的项目，目前在我的笔记本电脑上这个分析里头就包含超过2千万行的数字。下一个还是位置分析，这个来讲是做的商圈，供应范围的分析，你有一个配送中心，在一定时间内往周围配送范围是有限的，你可以比较细化评估你的供应中心配诵范围或者你商场辐射范围，这是可以更详细通过位置分析来量化。比如说你现在可以看到这个上面不同颜色，一层一层所覆盖最中央的位置，比较简单了，就是你的商场或者配送中心所处的位置，不同颜色代表车辆配送在多长时间到达的区域，你看到最外围是25分钟圈，25分钟半小时以内你的配送车辆或者你的客户看你是什么场景能够到达区域，越往中间偏深色时间越短，整体分布有点像一颗云彩的样子。下一个例子，十几年前在传统商业当中就有，我们知道在很多做数据分析教科书当中或者说新闻当中都有，十几年前沃尔沃得到啤酒和尿布的故事，经过分析，一个订单有人买了啤酒同时买了尿布，这个& 原因是为什么？这是购物篮分析典型场景，到现在我们当然已经很容易来去做综合购物篮分析，上面是购物篮分析可视化场景。你的A类和B类产品哪些是最容易被一起卖出去的，那么现在这上面可视化综合的使用颜色和大小这两个可视化元素，这上边的点个头越大说明它横纵两个轴一起被卖出去的概率更高，但是这两个东西绝对一起卖出去，对你不是好事，它还有利润和配送成本的问题，所以我用颜色放了另外一个指标，就是利润。有可能这个产品频繁被打包卖出去，但是它的利润可能是很低的，这上面这个图，越偏红色这个产品组合这个购物篮利润越差，反之它的利润越好，你可以看到这张图，应该综合被打包出去这个产品和这个产品，都是利润相当好的。同时这个产品采购额又相对比较多一些，所以整个这个产品线都是经常容易被人打包，同时利润好，但是这个产品线也经常被打包出去和别的产品进行一起买，但是它的利润都不太好，所以你可以用可视化元素来得到购物篮分析的综合的分析结果。后边这个例子是一个挺好没有赚钱因素在里头的场景。这个客户是我们的一个科学家的客户，他是一个海洋生物学家，他只买了我们很小的产品金额，但他做的事情是很有意义。他研究是什么？翻成专业词语，浮粪，我们去过海洋馆，类似两个大翅膀的鱼在最大的池子里游，是鲨鱼近亲，他做这个，他做这个事情代表产品特色，以往他是在离开美国很远的地方去研究，然后研究手段主要是收集这些海洋生物游的位置，这GPS体系。他自己纯海洋生物学家，他是不懂得把这些东西怎么放到一个地图上做可视化，他不懂，所以他以前他是专门在美国本土雇了一个专家，他把数据定期从动物身上收集回来发给他，美国那做好报表发给他。但是有一天他开始用我们工具，他发现还是挺容易自己掌握，省了一道手，自己拿到数据自己把这个图做出来，就不用再去雇专家了。他研究的海洋生物是呆板无力，但是在地图上就很有意义，绿色和蓝色代表两个族群，它们各自活动范围，在海洋中活动的深度有各自明显差异，所以他可以用可视化方式把这些海洋生物划分成了两个独立的小的种群。下一个例子，我们知道在最近& 两到三年专车话题是很火爆，专车最早运营公司优步，商业模式不多说。作为公司运营角度他是很希望得到这样一个结果，我的客户从一个城市，从哪儿叫车要去哪儿量很大，他是希望知道，这样有空车司机鼓励他去那附近，性外一个角度，从很多种原因上这些公司都希望知道有多少比例客户，比如说就从华贸中心打车，现在要去国贸，这个地方很短，但是可能流量很大，这个其实有很多原因做这个事情，但是你要从可视化图表上来讲，是不太容易做的。你用地图分析，地图很好做出来，但是你要在城市范围内看到短途长途量情况不太容易做到，他引用这样可视化图表，这可视化图表做的是对象之间的关系图，你可以看到，首先如果你想知道从哪个地方出去要叫车的人最多，这很容易，现在这个区域，它的出去线的宽度是最宽的，在这个地方有最多需要叫车的人群。你想知道有大量的短途用户在哪里？现在这张图上，它放的是旧金山的数据，相邻两个地方其实是挨得越近，说明这两个地方相对越近，你只需要在可视化图表上找什么呢？找这种类型状态就可以。越是这样的状态说明这个地方从这儿上车从这儿就下了车，你可以很容易找到短途类的用户到底分布在什么样的地方，旁边柱状图是常见类型，柱子越高叫车越多，柱子越短，叫车人越少等等类似。我举的最后一个场景例子里头，这个是分析，跟我们现在做的事情有点像，这是一场在一个建筑内做的一场会议，这个会议本身分了很多个不同的房间，外边有不同的展位，那么实际上来讲，今天我相信应该组织方没有做这样的事情，我们在美国有一些客户包括我们自己，我们做这样的事情，你拿到参展的标识牌，有抽样的FRD的标签，我们知道你在会场移动技术是怎么样，这套技术是卖场和超市在用。然后结合你登记信息里头也知道你是什么行业的人，比如你是一位记者，你是一位制造业企业的员工，这是知道。所以来讲，我们可以去分析一下什么呢？你现在选中的某一个类型客户，比如说分析员，那么数据分析员在整个这场参展活动里头，上面的点是什么呢？这个用户到了这个位置上跟人家换了名片或者要了一份资料，那么你现在就知道这类的用户大概喜欢去哪些展位是比较多的。底下的这个线是什么？很好理解，他走过的路径是什么，他大概喜欢什么方式走。如果你的参展内容有效是什么？比如说我是一家参展商对我也是有用处，我希望把参展位摆在最关心的客户，我做数据分析工具的公司，我当然希望把我放在数据分析员、企业分析用户这些边上我最合适，我在他们走的路径上也是可以的。所以这是结合你的位置，其实是一个室内位置分析的一个很典型的需求。在相当多的超市和百货公司里头，至少在美国有很多做这类的事情。这是我引用最后一个例子，今天时间比较短，一般情况下我会拿一份数据给大家看一看，对这个数据直接做操作怎么做可视化分析，今天时间不够，所以有兴趣我们合作伙伴云顶科技在门口有一个展位，有兴趣到他们那拿一些资料，看看我们更多做可视化分析的例子，谢谢各位！
相关频道：
您对本文或本站有任何意见，请在下方提交，谢谢！
投稿信箱：
Copyright © 2000-- 硅谷动力公司版权所有 京ICP证000088号 京公网安备77号