Chart.js là một thư viện rất phổ biến và mạnh mẽ cho việc tạo các biểu đồ dễ dàng trong các ứng dụng web. Dưới đây là hướng dẫn chi tiết về cách cài đặt và sử dụng Chart.js trong JavaScript.
Giới Thiệu Về Chart.js
Chart.js Là Gì?
Chart.js là một thư viện open-source (mã nguồn mở), cho phép bạn tạo ra các biểu đồ động và tương tác một cách dễ dàng. Thư viện này hỗ trợ các loại biểu đồ khác nhau như biểu đồ đường, biểu đồ cột, biểu đồ tròn và nhiều loại khác.
Ưu Điểm Của Chart.js
- Dễ sử dụng: Dễ dàng tích hợp vào các dự án của bạn với một vài dòng code.
- Tương thích cao: Hoạt động tốt trên hầu hết các trình duyệt hiện đại.
- Nhẹ và nhanh: Hiệu suất tốt ngay cả với những dữ liệu có kích thước lớn.
- Đa dạng biểu đồ: Hỗ trợ nhiều loại biểu đồ khác nhau.
Cách Cài Đặt Chart.js
Chart.js có thể được cài đặt theo nhiều cách, dưới đây là các phương pháp thông dụng nhất.
Sử Dụng CDN
Bạn có thể sử dụng Chart.js bằng cách thêm đường dẫn CDN vào file HTML của mình. Đây là phương pháp dễ dàng nhất và không cần phải cài đặt thêm bất kỳ công cụ nào.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sử Dụng Chart.js Với CDN</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', // Loại biểu đồ
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: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Cài Đặt Qua npm
Nếu bạn đang làm việc với một dự án Node.js, hoặc đơn giản là muốn quản lý các thư viện một cách chuyên nghiệp hơn, bạn có thể sử dụng npm để cài đặt Chart.js.
-
Chạy lệnh sau để cài đặt Chart.js:
npm install chart.js -
Sau khi cài đặt xong, bạn có thể import thư viện vào mã JavaScript của mình:
import Chart from 'chart.js/auto'; var ctx = document.getElementById('myChart').getContext('2d'); var 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: { y: { beginAtZero: true } } } });
Tải Xuống và Bao Gồm Thủ Công
Bạn cũng có thể tải xuống file Chart.js và thêm nó vào dự án của bạn một cách thủ công.
- Truy cập vào trang tải xuống của Chart.js và tải file
Chart.min.js. - Thêm file này vào dự án của bạn và bao gồm nó trong file HTML:
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sử Dụng Chart.js</title> <script src="path/to/Chart.min.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var 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: { y: { beginAtZero: true } } } }); </script> </body> </html>
Các Loại Biểu Đồ Phổ Biến Trong Chart.js
Biểu Đồ Đường (Line Chart)
Biểu đồ đường thường được sử dụng để biểu diễn sự thay đổi của dữ liệu qua thời gian.
var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Biểu Đồ Thanh (Bar Chart)
Biểu đồ thanh được sử dụng để so sánh giữa các mục với nhau.
var ctx = document.getElementById('barChart').getContext('2d');
var barChart = 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: {
y: {
beginAtZero: true
}
}
}
});
Biểu Đồ Tròn (Pie Chart)
Biểu đồ tròn được sử dụng để biểu diễn tỷ lệ giữa các phần dữ liệu.
var ctx = document.getElementById('pieChart').getContext('2d');
var pieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
Tùy Chỉnh Chart.js
Tùy Chỉnh Đường Viền và Màu Sắc
Bạn có thể thay đổi màu sắc và đường viền của các phần tử trong biểu đồ bằng cách sử dụng các thuộc tính backgroundColor và borderColor.
Tùy Chỉnh Trục Toạ Độ
Chart.js cho phép bạn tùy chỉnh trục hoành (X) và trục tung (Y) của biểu đồ.
var ctx = document.getElementById('myChart').getContext('2d');
var 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(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
x: {
color: 'rgba(255, 99, 132, 1)'
},
y: {
beginAtZero: true,
color: 'rgba(54, 162, 235, 1)'
}
}
}
});
Tạo Biểu Đồ Động
Một trong những tính năng mạnh mẽ của Chart.js là khả năng cập nhật dữ liệu theo thời gian thực.
// Lấy dữ liệu mới và cập nhật biểu đồ
function updateChart(chart, data) {
chart.data.datasets[0].data = data;
chart.update();
}
// Sử dụng setInterval để cập nhật biểu đồ mỗi 2 giây
setInterval(function() {
var newData = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
updateChart(myChart, newData);
}, 2000);
Kết Luận
Chart.js là một công cụ mạnh mẽ và linh hoạt cho việc tạo các biểu đồ trong các ứng dụng web. Với khả năng dễ dàng cài đặt và tùy chỉnh, bạn có thể nhanh chóng tạo ra các biểu đồ đẹp mắt và chuyên nghiệp. Hy vọng qua bài viết này, bạn đã nắm được cách cài đặt và sử dụng thư viện Chart.js trong JavaScript. Chúc bạn thành công trong các dự án của mình!
Comments