ChartJS là 01 dự án của viện công nghệ trứ danh MIT - Hoa Kỳ.
Tổng cộng trong AdminLTE có 04 thư viện dùng vẽ đồ thị:
- ChartJS
- Flot
- Sparkline
- uPlot
Chú ý:
version của chartJS trong adminLTE chỉ là 2.9.4 (bản mới nhất là v4)
=> thỉnh thoảng sẽ có lỗi nhẹ hoặc vẽ hình không giống (xem console log)
p/S: sẽ có những chỗ AdminLTE cần thêm thẻ style phụ...
Phần mã nguồn live của AdminLTE ở đây.
Phần docs hướng dẫn của AdminLTE ở đây.
=> 02 phần này có nhiều cái không giống nhau.
Bây giờ chúng ta vẽ 01 đồ thị đơn giản nhất bằng thư viện chartjs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChartJS kick starter by lophocvitinh.vn</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
link gốc của đoạn mã này ở trang chartjs official
đoạn mã này gồm 03 phần và phải tuân thủ đúng thứ tự thì mới vẽ được (do js phải có đủ data + element html)
phần 01: canvas -> tấm vải để vẽ đồ thị lên
<div>
<canvas id="myChart"></canvas>
</div>
phần 02: chèn thư viện
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
phần 03:
đoạn mã xử lý kèm dữ liệu để vẽ -> phần dữ liệu có thể tách rời thành file riêng để tiện xử lý
<script>
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Mình có bài demo phần chartJS trong thực tế ở đây.
Toàn bộ thư viện chartJS ver 2.9.4 mình để ở đây.
Sưu tầm bởi #drM
Không có nhận xét nào:
Đăng nhận xét