Để tạo trang admin thống kê vẽ biểu đồ, ta có thể sử dụng thư viện chart.js để vẽ các loại biểu đồ như line, bar, pie, doughnut, v.v…
Để sử dụng thư viện này, ta cần thêm các tập tin js và css của thư viện vào trong thẻ head của trang jsp như sau:
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.css">
</head>
Sau đó, ta có thể sử dụng các đối tượng của thư viện để tạo ra các biểu đồ. Ví dụ, để vẽ biểu đồ line, ta có thể sử dụng đoạn mã sau:
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {}
});
</script>
Trong đó, myChart là đối tượng biểu đồ, type là loại biểu đồ (line ở đây), labels là danh sách các nhãn trục x, datasets là danh sách các dữ liệu và thuộc tính của chúng, options là các tùy chọn cho biểu đồ.
Ta có thể tham khảo thêm các ví dụ về cách sử dụng thư viện chart.js để vẽ các loại biểu đồ khác nhau tại trang chủ của thư viện.