推薦一個完全用 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 進行圖形繪製，所有圖素都是利用一大堆 div 標籤動態繪製出來的，可產生各種直線、曲線、圓、橢圓、多邊形、方形等等，然後再利用另一個人寫的 Bar Graph、Pie Chart、Line Chart、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