title: [網頁程式] 你看過嗎？用Javascript就能畫 9 種統計圖！

---

**Category**

- [網路相關](https://www.soft4fun.net/category/software/internet)

**Tag**

- [IE](https://www.soft4fun.net/tag/ie)
- [虛擬主機](https://www.soft4fun.net/tag/%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f)

**圖片清單**

- ![[網頁程式] 你看過嗎？用Javascript就能畫 9 種統計圖！ 1521207495_f243f67810_m](http://pic.soft4fun.net/imgs/2148/1521207495_f243f67810_m.jpg "[網頁程式] 你看過嗎？用Javascript就能畫 9 種統計圖！ 1521207495_f243f67810_m")

---

在開發網頁程式的時候，常常會需要畫統計圖，但是有許多繪製統記圖的元件都是需要$$的，所以像我們這種窮到快被鬼抓去的開發人員其實根本買不起那一個要價幾十美金的元件。如果租用虛擬主機的就更甭說了，主機商基於安全考量，多數都不會同意安裝元件在主機上，畫統計圖的理想離我們越來越遙遠…..

 

所以就有人想把繪製統計圖的功能動到前端的瀏覽器來，也就是透過JavaScript畫圖，一方面不用安裝伺服器元件，也能省下繪製統計圖型所耗費的伺服器資源。不過前端網頁沒辦法直接產生圖片，事情好像變得更複雜…

          

[![[網頁程式] 你看過嗎？用Javascript就能畫 9 種統計圖！ 1521207495_f243f67810_m](http://pic.soft4fun.net/imgs/2148/1521207495_f243f67810_m.jpg "[網頁程式] 你看過嗎？用Javascript就能畫 9 種統計圖！ 1521207495_f243f67810_m")](http://www.flickr.com/photos/14688418@N08/1521207495/)

  

不過「**JavaScript Diagram Builder**」卻意外的把這些功能做出來了！而且他是免費(但有版權)的！只使用JavaScript，就能夠畫出各種統計圖型，目前能夠繪製以下幾種圖型：

 

- Bar chart
- Box chart
- Dot chart
- Pixel Chart
- Line chart
- Area chart
- Arrow chart
- Pie chart

 

另外，如果您還是想透ASP或PHP等Server端去完成繪圖的話，他也提供了Server端的元件供下載，發揮了Web 2.0「分享」的精神..(我在亂扯)

 

官方網站：[http://www.lutanho.net/diagram/](http://www.lutanho.net/diagram/)  
下載網址：[http://www.lutanho.net/diagram/download.html](http://www.lutanho.net/diagram/download.html)