The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

推薦一個完全用 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 GraphPie ChartLine ChartMultiple 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) 繪圖製表用,假設畫布的大小為 寬 400px400px,還有 idcanvas_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

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

graph.js provides a simple mechanism to draw bar graphs. It  uses wz_jsgraphics.js  which is copyright of its author.

相關連結