2016年1月9日 星期六

Chartist JS - 使用心得與教學分享-製作Pie Chart

最近想要弄個資料視覺化的網站,開始碰JS,覺得這門語言太有趣了XD

前提結束,那就來看看Chartist Js可以做什麼吧!這裏有大量範例介紹
Chartist Js 透過Svg繪製,最大特點是所有的元素都會繪製到DOM,所以要對各個label、line、path操作就十分的容易。
我整理了最近學習的心得:製作一個Pie Chart
1.自訂class name -> css輕鬆配色
2.slice的event listener 
3.checkbox動態操作pie chart
4.動態產生Label
完成圖:

*入坑注意,仔細一看Chartist.js還在0.X版,所以很多資料與Bug還在修,當初沒注意到就跳進來,很多問題都要到github發issue,好在開發者回覆都很快,如果要求不多,還是考慮較為成熟的chart js吧 (慘痛經驗OTZ
*chart.js用canvas繪製,chartist.js用svg,兩者差異頗大,可以參考連結資料Canvas vs Svg,私心認為chart.js預設的顏色與排版都比較美,相對chartist.js自由度較高、容易客製
 

沒有留言:

張貼留言