# 推薦一個完全用 DHTML / CSS 完成的圖表繪製函式庫

最近用了一個很簡易的繪製圖表(Chart)的工具，完全是以 DHTML / CSS 完成所有圖表繪製工作，是個完全 Client-side 的套件，而且支援 Gecko-Browsers, IE 4, 5, 6, 7, 8, Opera 5, 6 and 7+ 等各式瀏覽器，如果你的圖表並不複雜，建議可以考慮用這套進行圖表繪製，可以省去你不少時間。

這一套 DHTML Library 主要是利用 [High Performance JavaScript Vector Graphics Library](http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm) 進行圖形繪製，所有圖素都是利用一大堆 div 標籤動態繪製出來的，可產生各種直線、曲線、圓、橢圓、多邊形、方形等等，然後再利用另一個人寫的 Bar Graph、[Pie Chart](https://web.archive.org/web/20170627165031/http://sbmkpm.com/pie.html)、[Line Chart](https://web.archive.org/web/20170627222621/http://sbmkpm.com/line.html)、Multiple Line Chart 等函式庫繪製出各種圖表。

我以 Pie Chart 為例，繪製的方法有以下 3 個步驟：

1\. 載入 JavaScript 函式庫

```
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
```

2\. 宣告一個**畫布**(Canvas) 繪圖製表用，假設畫布的大小為 寬 400px 高 400px，還有 **id** 為 canvas\_name

```
<div id="canvas_name"
     style="position: relative; width: 400px; height: 400px; overflow: auto"></div>
```

3\. 接著將 Pie Chart 的每一個項目都新增(add)進 pie 物件，最後用 render 函式將圖表劃到畫布上！

```
<script type="text/javascript">

var p = new pie();

p.add("Item 1",10);
p.add("Item 2",56);
p.add("Item 3",52);

p.render("canvas_name", "Chart Title", 250);

</script>
```

執行範例如下 ( 下圖與上述範例無關 )：

![Pie Chart Sample](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/2cc117cfd349a40f2bf2-image_3.png "Pie Chart Sample")

其他的圖表也都跟 Pie Chart 一樣簡單，在 \*.js 中都有範例可參考：

![graph.js provides a simple mechanism to draw bar graphs. It  uses wz\_jsgraphics.js  which is copyright of its author. ](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ced4743ec7fab0671c26-image_6.png "graph.js provides a simple mechanism to draw bar graphs. It  uses wz_jsgraphics.js  which is copyright of its author. ")

**相關連結**

-   [High Performance JavaScript Vector Graphics Library](http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm)
-   DHTML / CSS based bar graph, line graph and pie chart  
    Download \[Bar Graph\], \[[Pie Chart](https://web.archive.org/web/20170627165031/http://sbmkpm.com/pie.html)\] or \[[Line Chart](https://web.archive.org/web/20170627222621/http://sbmkpm.com/line.html)\] or \[Multiple Line Chart\]