接手了一個需求的時候，其中有個 UI圖是這樣的：

按照 PM本來的意思，這張圖中只有那幾個數字是從介面獲取的，而且從介面獲取到的每項數字的值，與目前標註的數字相差不會超過 10%，所以柱狀圖的條形高度不用管，直接一張圖片靜態的就行了，這確實很省事，三下五除二就弄完。

不過，作為一個老(xian)實(de)正(dan)直(teng)的程式設計師，怎麼可以容忍弄虛作假呢，我心中默默計算了下，用程式碼把這張圖畫出來也要不了多長時間，不會耽誤專案進度的，於是開搞。

首先，先把圖拆解成幾份可以用程式碼畫出來的圖形，如下：

1. 柱狀圖形，就是圓角長方形，豎直紅色柱與豎直紅色柱之間的空白，也是一個豎直的圓角長方形，只不過是透明的，作用是底部構建圓角
2. 底部的基座，是一個水平長方形，只不過這個長方形除了看到的那一部分紅色外，還有z-index大於紅色豎直長方形、小於透明柱狀上半部分，用於遮掩紅色柱底部與圓角透明柱底部出現的空白
3. 因為底部基座的高度其實比視覺上第一眼看過去更高的，所以無法使用 border-radius屬性產生圓角，否則就露餡了，因而在底部基座的最左邊和最右邊，還各有一個小的圓角長方形，用於產生圓角讓基座的兩邊看起來圓滑

弄清楚了上述幾點後，樣式就比較好寫了

然後就是各個豎直紅色柱的高度計算。

這也很簡單，給最高的紅色柱定一個高度，其他紅色柱以這個最高的紅色柱為基準計算高度

例如，最高紅色柱定為 200px，最高紅色柱的數字值為 987

這樣，就能計算出所有紅色柱對應的高度了

至於如何讓紅色柱的高度從 0動態增長到該有的高度，只需要使用一個 CSS3 的 transition屬性即可，最開始時將所有紅色柱的高度設為 0，然後再使用 js將高度設為該有的值就 ok了

最終實現的效果如下：

本文所實現動畫的可執行程式碼已經放到 Github了，程式碼的註釋算是比較清晰的，有興趣的可以自行下載執行。