最近用了一個很簡易的繪製圖表(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 一樣簡單,在 *.js 中都有範例可參考:
相關連結