[指南] Chart.js 前端圖表實用工具

章節連結

Chart.js 是個輕量且具備多樣化設定的 JavaScript Library,支援 8 種圖表類型,也支援混合圖表。在大數據的時代,資料視覺化變成一門顯學且對使用者而言必備的工具。不過由於可以設定的地方很多,外加官方說明文件的 Demo 程式碼缺乏客製化選項的示範,這邊筆記一下自己摸索的結果。
chart.js logo


安裝

提供多樣化的安裝方式,你可以使用 npm, bower, CDN……等方式。
詳見:https://www.chartjs.org/docs/latest/getting-started/installation.html

基本使用

圖表類型

分為折線圖(Line)、長條圖(Bar)、雷達圖(Radar)、圓餅圖(Pie)、極座標餅圖(Polar Area)、泡泡圖(Bubble)、散布圖(Scatter)、面積圖(Area),一共八類。
在 2.0 以後的版本中,你是可以使用混合圖表的。


設定參數

各種圖表類型皆適用

官方文件:https://www.chartjs.org/docs/latest/configuration/

由於細項實在太多,請自行根據需要官網查詢參數,並在 options 的文件裡面新增對應的 key ,將設定帶入即可。以下為 options 的架構,不需要用到的 key 可以刪除。

特定表格類型設定

Cartesian Axes (笛卡爾座標系)

常見的 X, Y 軸圖表。採 X, Y 軸分開設置,每個軸線分為三個主要選項 – gridLines (格線), ticks (格間距), scaleLabel (軸標題)

Radial Axes

有四個主要選項 – gridLines (格線), angleLines (角度線), ticks (間距), pointLabels (圖例點)

Demo


參考資料

1. Chart.js 官方網站
2. Chart.js 官方文件
3. [前端軍火庫]Chart.js – 輕鬆完成資料視覺化
4. [Javascript] Chart.js – Line Chart , Y 軸加入顯示名稱,加入貨幣的逗點符號
5. 簡單使用Chart.js網頁上畫圖表範例集-Javascript 圖表、jQuery圖表繪製

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:168