初探 Chart.js
前言
在前端直接畫圖表相當麻煩，透過 Chart.js 來畫圖表就簡單不少，可以大量簡化畫圖表的過程，在此把學習的過程做個紀錄。內容
這次的範例主要參考 Web 視覺化(一)：使用 Chart.js 輕鬆建立圖表 ，接著直接看範例HTML 的部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <canvas id="mycanvas" width="800" height="600"></canvas> </body> </html>
Javascript 的部分
let ctx = document.getElementById('mycanvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'My bar chart',
data: [10, 20, -15]
}]
}
});
執行結果
 |
| 執行結果 |
範例使用 HTMLCanvasElement 來顯示圖表， Chart.js 的部分用起來很直覺， type 可以決定是哪一種圖表，像條狀圖、圓餅圖與雷達圖...等， data 的部分會依據 type 的不同給不同的資料，可以參考 Chart.js documentation 來填寫。
範例的執行結果的 HTMLCanvasElement 會依據視窗大小自動擴展，這是預設行為，如果要拒絕自動擴展可以把範例改成以下
let ctx = document.getElementById('mycanvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'bar',
options:{
responsive:false
},
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'My bar chart',
data: [10, 20, -15]
}]
}
});
修改後就不自動擴展，但要注意 HTMLCanvasElement 的大小縮得太嚴重時畫出來的結果不太正常，最好可以限制最低的大小。
參考資料
[GitHub] Chart.jsChart.js documentation
Web 視覺化(一)：使用 Chart.js 輕鬆建立圖表
沒有留言:
張貼留言