Web_Dashboard开篇：如何在网页中制作炫酷的看板
1、項目需求
工作中需要將人力資源模塊做成Dashboard的炫酷網頁模式，類似燒錢向業界購買看板系統那樣絢麗多彩，其中我們從肉眼中可以感覺到的東西，包括科技藍、黑背景、形形色色邊框、多樣圖字組合表達以及“活躍”數據的呈現等；
2、科技背景和邊框
收集科技背景圖片，需要通過網絡途徑收集各種實用的科技藍黑背景圖片和邊框圖片（當然這只適合集美工于一體的開發師，倘若后勤部隊包括美工軍團，完全可以不考慮這些），有條件的可以使用PS之類的繪圖軟件自行制作，比較實用的工具有PS、Artweaver Free 6等；
選擇合適的圖片充當Body標簽的背景，并命名為hr-background.jpg（命名任意）；
Body背景圖片配置，采用CSS樣式將圖片平鋪到Body標簽的背景中去，這里有兩種方法：一種是直接引用CSS定義body的背景圖片background:url(…);另一種是采用img標簽來包含背景圖片；
Body的背景圖片采用第一中方法：
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背景圖片如何設置成可隨內容一起滾動還有待提高；由于篇幅的問題，全屏效果展示應用將在后續文章中展示，以及其他應用到的細枝末節底層技術也將在后續的文章中更新；
總結
以上是生活随笔為你收集整理的Web_Dashboard开篇：如何在网页中制作炫酷的看板的全部內容，希望文章能夠幫你解決所遇到的問題。
