Chart.js 是個輕量且具備多樣化設定的 JavaScript Library，支援 8 種圖表類型，也支援混合圖表。在大數據的時代，資料視覺化變成一門顯學且對使用者而言必備的工具。不過由於可以設定的地方很多，外加官方說明文件的 Demo 程式碼缺乏客製化選項的示範，這邊筆記一下自己摸索的結果。
安裝
提供多樣化的安裝方式，你可以使用 npm, bower, CDN……等方式。
詳見：https://www.chartjs.org/docs/latest/getting-started/installation.html
基本使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// 1. HTML 中使用 canvas 標籤，一定要有 id 來取得 DOM 位置。 // 寬度高度視情況決定要不要寫死 <canvas id="myChart" width="400" height="400"></canvas> // 2. 在 JS 檔案中，先取得 DOM 位置，再用 new Chart(DOMposition,config) 的格式載入即可 let ctx = document.getElementById('myChart'); let myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); </script> |
圖表類型
分為折線圖(Line)、長條圖(Bar)、雷達圖(Radar)、圓餅圖(Pie)、極座標餅圖(Polar Area)、泡泡圖(Bubble)、散布圖(Scatter)、面積圖(Area)，一共八類。
在 2.0 以後的版本中，你是可以使用混合圖表的。
設定參數
各種圖表類型皆適用
官方文件：https://www.chartjs.org/docs/latest/configuration/
由於細項實在太多，請自行根據需要官網查詢參數，並在 options 的文件裡面新增對應的 key ，將設定帶入即可。以下為 options 的架構，不需要用到的 key 可以刪除。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var chart = new Chart(ctx, { type: 'line', data: data, options: { // 動畫類型 animation: { ...... }, // 版型寬度 layout: { padding: { left: 50, right: 0, top: 0, bottom: 0 } }, // 圖例 legend:{ display: true, labels: { fontColor: 'rgb(255, 99, 132)' } }, // 表格標題 title: { display: true, text: 'Custom Chart Title' }, // 移到點上的提示框 tooltips: { callbacks: { // any kind of callback } } } }); |
特定表格類型設定
Cartesian Axes (笛卡爾座標系)
常見的 X, Y 軸圖表。採 X, Y 軸分開設置，每個軸線分為三個主要選項 – gridLines (格線), ticks (格間距), scaleLabel (軸標題)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
options:{ // 各類圖表通用參數 ......, scales: { // 各軸標題設定 // https://www.chartjs.org/docs/latest/axes/labelling.html // 各軸格線設定 // https://www.chartjs.org/docs/latest/axes/styling.html // x 軸設置 xAxes: [{ // x 軸標題 scaleLabel:{ display: true, labelString:"Mouth", fontSize: 16 }, // x 軸格線 gridLines: { display: true } }], // y 軸設置 yAxes: [{ // y 軸標題 scaleLabel:{ display: true, labelString:"Amount", fontSize: 16 }, // y 軸格線 gridLines: { display: false }, // y 軸間距 ticks: { min: 0, max: 120, stepSize: 30 } }] } } |
Radial Axes
有四個主要選項 – gridLines (格線), angleLines (角度線), ticks (間距), pointLabels (圖例點)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
options:{ scale: { ticks: { max: 5, min: 0, stepSize: 0.5 }, gridLines:{ ........ } } } |
Demo
參考資料
1. Chart.js 官方網站
2. Chart.js 官方文件
3. [前端軍火庫]Chart.js – 輕鬆完成資料視覺化
4. [Javascript] Chart.js – Line Chart , Y 軸加入顯示名稱，加入貨幣的逗點符號
5. 簡單使用Chart.js網頁上畫圖表範例集-Javascript 圖表、jQuery圖表繪製
