用JavaScript Graphics Library及CSS也能繪製純html的圓餅圖

一般頁面在呈現圖表時，多半以繪圖軟體繪製成圖檔，再利用img標籤連結。這樣子固定的圖形無法符合動態資料的需求配合改變。近日發現一套 JavaScript Graphics Library 利用 High Performance JavaScript Vector Graphics Library 進行圖形繪製，特色是每一像素線條均以 div 標籤動態繪製出來的。Bar Graph、Pie Chart、Line Chart、Multiple Line Chart 等函式庫可繪製產生各種直線、曲線、圓、橢圓、多邊形、方形等等。若頁面上所需呈現的圖形不複雜，這個函式庫蠻好用的。

我試寫了表單輸入欄位，以四個文字輸入欄位接受user的數字輸入，在按下"送出"按鈕後立即產出圓餅圖。配合撰寫的javascript如下圖，頁面參考如附圖!!