使用 Chart.js 建立圖表，需要初始化 Chart 類，并傳入圖表節點：
HTML Canvas 代碼，圖表顯示位置：
<canvas id="myChart" width="400" height="400"></canvas>
通過不同方式擷取節點：
初始化方式
//以下方式都可以
const ctx = document.getElementById('myChart'); // 擷取節點
const ctx = document.getElementById('myChart').getContext('2d'); // getContext() 方法傳回 canvas 的上下文
const ctx = $('#myChart'); // jQuery 擷取
const ctx = 'myChart'; // 傳入節點 ID
通過以上代碼獲得元素節點後，我們就可以建立自己的圖表類型了。
以下執行個體我們建立一個簡單的折線圖：
執行個體
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 設定 X 軸上對應的标簽
const data = {
labels: labels,
datasets: [{
label: '我的第一個折線圖',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 設定線的顔色
tension: 0.1
}]
};
const config = {
type: 'line', // 設定圖表類型
data: data,
};
const myChart = new Chart(ctx, config);
以上執行個體輸出結果為：
以下執行個體建立一個柱形圖，顯示不同顔色的票數。
執行個體
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# 票數',
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: {
y: {
beginAtZero: true
}
}
}
});
以上執行個體輸出結果為：