Web_Dashboard开篇：如何在网页中制作炫酷的看板

1、项目需求
工作中需要将人力资源模块做成Dashboard的炫酷网页模式，类似烧钱向业界购买看板系统那样绚丽多彩，其中我们从肉眼中可以感觉到的东西，包括科技蓝、黑背景、形形色色边框、多样图字组合表达以及“活跃”数据的呈现等；
2、科技背景和边框
收集科技背景图片，需要通过网络途径收集各种实用的科技蓝黑背景图片和边框图片（当然这只适合集美工于一体的开发师，倘若后勤部队包括美工军团，完全可以不考虑这些），有条件的可以使用PS之类的绘图软件自行制作，比较实用的工具有PS、Artweaver Free 6等；

选择合适的图片充当Body标签的背景，并命名为hr-background.jpg（命名任意）；

Body背景图片配置，采用CSS样式将图片平铺到Body标签的背景中去，这里有两种方法：一种是直接引用CSS定义body的背景图片background:url(…);另一种是采用img标签来包含背景图片；
Body的背景图片采用第一中方法：

body{
 	/*设置背景图片以及显示的中心位置*/			
 	background:url('${static}/images/hr-background.jpg') no-repeat center center;
 	background-size:cover;/*背景图片完全自适应填充整个元素*/
 	background-attachment:fixed;/*设置背景图片是否固定或者随页面其余部分滚动*/
 	background-color:#02255b;/*图片未加载完全前代，可代替应用的近似颜色*/
 	}

div边框背景采用第二种方法，设置img的alt=””,height=”父容器高度” ,width=”100%”，父元素div 的position:relative，同级state样式div的position:absolute,以达到同级元素悬浮在img上方的效果；

3、多样字图组合表达
自我总结原则：多使样图，少用文字；明确图意，不足补字；
图形，在网页中可视化图形表达工具有百度的Echarts、D3(数据驱动文档)、Flot、HeightChart、sparkLine等多种，可根据条件组合使用，并由数据的多样式选择适合的图形表达，例如折线图适合表达对比数据随时间的变化规律，雷达图适合表达数据的多指标达成关系，旭日图适合表达数据的层次、占比性关系等；
文字，首先需要注意文字的大小和颜色关系，原则：重要数据要鲜明可见，其次，可以使用字体图标（font awesome或glyphicon）或者特殊字符来替换文字的表达；
特殊字符的应用（经验表明：并不是所有特殊字符都可以在网页中使用）：
从Excel应用——插入——符号，在这里清楚地看到所有符号所对应的十六字进制码，例如⑤字符;转十进制：16^3*2+16^2*4+16^1*6+16^0*4=9316
Html:⑤ CSS:\2464;JS:\U2464;

4、“活跃”数据呈现
多变数据：可以设置数据的间隔刷新时间，定时动态绑定图表或者数字的滚动显示；
静态数据：方法一：采用图的动态切换效果（饼图间隔显示不同指标值）；方法二：采用容器的动态切换多图效果（轮播）；
效果图

由于涉及到项目中具体应用，所以效果图采用了马克，谢谢体谅，以上是我在工作中总结出的Web Dashboard呈现经验，希望其他读者有更好的思路可以一同共勉！

5、可期彩蛋
数据的可视化呈现可以很直观的表达出数据意图，有助于决策分析，在布局设计的过程中需要注意板面的侧重点以及关联性，由于条件的限制和能力的不足，目前收集到的公开资料，只有涉及看板和布局意见，具体使用的底层实现技术还需要自己在工作中不断研讨，在我的这篇中还存在很多不足和改进，例如Body背景图片如何设置成可随内容一起滚动还有待提高；由于篇幅的问题，全屏效果展示应用将在后续文章中展示，以及其他应用到的细枝末节底层技术也将在后续的文章中更新；