Giới thiệu về Chart.js
Chart.js là thư viện JavaScript mã nguồn mở giúp vẽ biểu đồ HTML5 Canvas một cách đơn giản và trực quan. Với Chart.js, bạn có thể tạo ra các biểu đồ đẹp mắt chỉ với vài dòng code, hỗ trợ đầy đủ các loại biểu đồ thông dụng.
Chart.js sử dụng API declarative, dễ học và dễ tích hợp. Đây là lựa chọn tuyệt vời cho các dự án JavaScript cần trực quan hóa dữ liệu.
Cài đặt và khởi tạo
Bạn có thể cài đặt Chart.js qua CDN hoặc npm:
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Hoặc npm -->
<!-- npm install chart.js -->Sau đó, tạo một thẻ canvas và khởi tạo biểu đồ:
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6'],
datasets: [{
label: 'Doanh số (triệu đồng)',
data: [12, 19, 15, 25, 22, 30],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(255, 159, 64, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Doanh số 6 tháng đầu năm'
}
}
}
});
</script>Các loại biểu đồ phổ biến
Chart.js hỗ trợ nhiều loại biểu đồ: bar, line, pie, doughnut, radar, polarArea, bubble, và scatter. Dưới đây là ví dụ biểu đồ đường (line chart):
new Chart(ctx, {
type: 'line',
data: {
labels: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
datasets: [
{
label: 'Lượt truy cập',
data: [150, 230, 180, 290, 340, 460, 520],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.4,
fill: true
},
{
label: 'Lượt đăng ký',
data: [20, 35, 28, 42, 55, 68, 72],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
tension: 0.4,
fill: true
}
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index'
},
scales: {
y: {
beginAtZero: true
}
}
}
});Tùy chỉnh biểu đồ nâng cao
Chart.js cung cấp nhiều tùy chọn để tùy chỉnh màu sắc, tooltip, legend và animation. Bạn có thể tạo biểu đồ tròn với nhãn tỷ lệ phần trăm:
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['JavaScript', 'Python', 'Java', 'Go', 'Rust'],
datasets: [{
data: [42, 28, 15, 10, 5],
backgroundColor: [
'#F7DF1E', '#3776AB', '#B07219', '#00ADD8', '#DEA584'
]
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let total = context.dataset.data.reduce((a, b) => a + b);
let pct = ((context.parsed / total) * 100).toFixed(1);
return context.label + ': ' + pct + '%';
}
}
}
}
}
});Kết luận
Chart.js là một trong những thư viện vẽ biểu đồ JavaScript dễ sử dụng nhất hiện nay. Với API đơn giản, tài liệu phong phú và khả năng tùy biến cao, đây là công cụ lý tưởng cho bất kỳ dự án web nào cần hiển thị dữ liệu trực quan. Hãy bắt đầu với Chart.js ngay hôm nay để làm đẹp dashboard của bạn!
