首先，我們來分析一下，為什么客戶會有這樣的要求。

馬云在2013年雙十一的新聞發(fā)布會上，展示了實時的交易數(shù)據(jù)，看下圖。

從銷售所集中區(qū)域，到銷售額都是實時的刷新數(shù)據(jù)，這種十分鐘近十五億的銷售動態(tài)的展示效果無疑是震撼的。于是客戶就要求了，我也要這種效果，我也要！

當(dāng)然，這樣的圖，不是說做就做的。技術(shù)誰來實現(xiàn)應(yīng)該是首先要解決的問題。
如果你是公司的產(chǎn)品，估計早就被技術(shù)的吐沫星子噴死了。技術(shù)會跟你說這個東西有多難多難實現(xiàn)，需要耗費多少多少人力，需要多長多長周期，才能開發(fā)完，上線之后還有很多不確定的因素存在。所以最終目的就是讓你放棄這樣的想法。

如果你是公司的設(shè)計或者前端，想做一套這樣的界面，估計技術(shù)也會說，那你們要把整個圖表功能寫好了，我們才能開發(fā)。意思就是尼瑪，你自己想做這樣，你自己去搞定JS啊，技術(shù)才不攬這個苦差。

所以最終的糾結(jié)點就是：是前端還是技術(shù)來寫圖表部分的問題。
經(jīng)過技術(shù)人員和前端人員的初步討論結(jié)果：從網(wǎng)上找現(xiàn)成的開源代碼來修改。

一開始我們也找了最近大家都在研究的bootstrap的框架，但是前端和開發(fā)發(fā)現(xiàn)這個框架的可編輯功能比較差，其實相當(dāng)于一個控件，如果想修改它的參數(shù)，比較難。

于是我們又找了2套XML的代碼：
結(jié)合設(shè)計師的效果圖，我們對這2個工具的部分圖形效果做了一下分析。

(注：設(shè)計師效果圖中的百分比儀表盤，是利用HTML5 的Canvas畫布功能來實現(xiàn)的。

雖然網(wǎng)上也有很多現(xiàn)成的控件，但是不滿足客戶的要求，比如沒有溢出等功能的展示。

其他折線、柱狀圖、餅圖均是由Jquery的控件修改完成。)

工具一的圖形上有過多類似高光，漸變投影等特效，這是我們的設(shè)計里所沒有的，
而工具二僅僅是扁平化的色值，所以從整體來看它更適合我們的設(shè)計樣式和開發(fā)修改。

選好工具之后，下一步就是確認(rèn)哪些是可以做修改的。
比如，圖表樣式中餅圖、柱狀和折現(xiàn)的色值能否修改，圖表的背景色能否修改？
圖表中數(shù)據(jù)的字體、字號能否修改？數(shù)據(jù)的色值能否修改？
這些都是需要技術(shù)去按照設(shè)計師提供的六進制的色值來找相應(yīng)的地方調(diào)整的。

根據(jù)技術(shù)對代碼的深入研究，結(jié)果是這套代碼的可修改性沒有我們預(yù)期的那么強。
但是也勉勉強強能實現(xiàn)設(shè)計師的設(shè)計效果了，所以總的來說還是比較適合的。

如：設(shè)計師的效果圖中背景色圖表的背景是和界面背景一致的。
我們的想法是：圖表背景色透明，界面是深灰色。
實際呢？圖表不能設(shè)置背景色的ALPHA透明值，只能設(shè)置六進制色。
也就是說，必須在靜態(tài)頁面里面把模塊的背景色和圖表的背景色設(shè)置成一個顏色，才能使圖表在視覺上看起來是透明的。

所以有些東西需要調(diào)整和變通的。
另外：如需文章中說到的jquery工具包請直接戳這里。