Làm cách nào để bạn có thể bắt đầu tạo trực quan hóa dữ liệu với Chart.js? Bạn sẽ tìm hiểu cách thực hiện trong bài viết này.
Bắt đầu nào.
Chart.js là gì?
Chart.js là một thư viện JavaScript trực quan hóa dữ liệu mã nguồn mở được sử dụng để vẽ các biểu đồ có thể kết xuất HTML. Nó hiện hỗ trợ tám loại biểu đồ tương tác khác nhau mà bạn cũng có thể tạo hoạt ảnh. Để tạo một biểu đồ dựa trên HTML với chart.js, bạn cần một canvas HTML để giữ nó.
Thư viện chấp nhận một tập hợp các tập dữ liệu và các thông số tùy chỉnh khác như màu nền, màu đường viền, v.v. Một trong những tập dữ liệu là nhãn , đại diện cho các giá trị trên trục X. Giá trị còn lại là một tập hợp các giá trị số, thường nằm trên trục Y.
Bạn cũng cần chỉ định loại đồ thị trong đối tượng biểu đồ để thư viện biết đồ thị nào cần vẽ.
Cách tạo biểu đồ với Chart.js
Như chúng tôi đã đề cập trước đây, bạn có thể tạo nhiều loại biểu đồ khác nhau với chart.js . Đối với hướng dẫn này, bạn sẽ bắt đầu với biểu đồ đường và biểu đồ thanh. Một khi bạn nắm được khái niệm đằng sau những điều này, bạn sẽ có tất cả các công cụ và sự tự tin cần thiết để vẽ các biểu đồ có sẵn khác.
Để bắt đầu sử dụng chart.js , hãy tạo các tệp cần thiết. Đối với hướng dẫn này, tên tệp là chart.html , plot.js và index.css . Bạn có thể sử dụng bất kỳ quy ước đặt tên nào cho các tệp của mình.
Bây giờ, hãy dán phần sau vào phần đầu của tệp HTML của bạn để liên kết với mạng phân phối nội dung Chart.js (CDN).
Trong chart.html :
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
</script>
</head>
Tiếp theo, tạo một canvas HTML để giữ biểu đồ của bạn và cung cấp cho nó một ID . Ngoài ra, hãy kết nối với tệp CSS (index.css) trong phần đầu và trỏ đến tệp JavaScript (plot.js) của bạn trong phần nội dung .
Cấu trúc của tệp HTML trông như sau:
<!DOCTYPE HTML>
<html>
<head>
<title>
Chart
</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<header>
<h1>
Charts
</h1>
</header>
<canvas id="plots" style="width:100%;max-width:700px"></canvas>
<script src="plot.js">
</script>
</body>
</htm/>
Và trong CSS của bạn :
body{
background-color:#383735;
}
h1{
color:#e9f0e9;
margin-left:43%;
}
#plots{
margin:auto;
background-color: #2e2d2d;
}
Kiểu CSS ở trên không phải là một quy ước cố định. Vì vậy, bạn có thể tạo kiểu tùy thích tùy thuộc vào cấu trúc DOM của bạn. Khi các tệp HTML và CSS của bạn đã sẵn sàng, đã đến lúc vẽ biểu đồ của bạn bằng JavaScript.
Biểu đồ đường
Để tạo biểu đồ đường với chart.js , bạn sẽ đặt loại biểu đồ thành đường . Thao tác này yêu cầu thư viện vẽ biểu đồ đường.
Để chứng minh điều này, trong tệp JavaScript của bạn:
// Get the HTML canvas by its id
plots = document.getElementById("plots");
<strong>// Example datasets for X and Y-axesstrong>
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; <strong>//Stays on the X-axisstrong>
var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', <strong>//Declare the chart typestrong>
data: {
labels: months, <strong>//X-axis datastrong>
datasets: [{
data: traffic, <strong>//Y-axis datastrong>
backgroundColor: '#5e440f',
borderColor: 'white',
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
});
Đầu ra :
Hãy thoải mái thay đổi giá trị điền thành true , sử dụng thêm dữ liệu hoặc chỉnh sửa màu sắc để xem điều gì xảy ra.
Như bạn cũng có thể thấy, có một hộp chú giải nhỏ ở đầu biểu đồ. Bạn có thể loại bỏ điều đó bên trong một tham số tùy chọn tùy chọn .
Tham số tùy chọn cũng hỗ trợ với các tùy chỉnh khác ngoài việc xóa hoặc bao gồm chú giải. Ví dụ: bạn có thể sử dụng nó để buộc một trục bắt đầu từ 0.
Để khai báo một tham số tùy chọn , đây là cách phần biểu đồ trông như thế nào trong tệp JavaScript của bạn:
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', <strong>//Declare the chart typestrong>
data: {
labels: months, <strong>//X-axis datastrong>
datasets: [{
data: traffic, <strong>//Y-axis datastrong>
backgroundColor: '#5e440f', <strong>//Color of the dotsstrong>
borderColor: 'white', <strong>//Line colorstrong>
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
<strong> //Specify custom options:strong>
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
//Specify settings for the scales. To make the Y-axis start from zero, for instance:
scales:{
yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers.
}
}
});
Đầu ra :
Bạn cũng có thể sử dụng các màu nền khác nhau cho mỗi dấu chấm. Tuy nhiên, thay đổi màu nền theo cách này thường hữu ích hơn với biểu đồ thanh.
Tạo đồ thị thanh với Chart.js
Ở đây, bạn chỉ cần thay đổi loại biểu đồ thành thanh . Bạn không cần đặt tùy chọn tô màu vì các thanh sẽ tự động thừa kế màu nền:
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', <strong>//Declare the chart typestrong>
data: {
labels: months, <strong>//X-axis datastrong>
datasets: [{
data: traffic, <strong>//Y-axis datastrong>
backgroundColor: '#3bf70c', <strong>//Color of the barsstrong>
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});
Đầu ra :
Hãy thoải mái buộc trục Y bắt đầu từ 0 hoặc bất kỳ giá trị nào như bạn đã làm đối với biểu đồ đường.
Để sử dụng các màu khác nhau cho mỗi thanh, hãy chuyển một mảng màu phù hợp với số lượng mục trong dữ liệu của bạn vào tham số backgroundColor :
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', <strong>//Declare the chart typestrong>
data: {
labels: months, <strong>//X-axis datastrong>
datasets: [{
data: traffic, <strong>//Y-axis datastrong>
<strong>//Color of each barstrong>:
backgroundColor: [
"rgba(196, 190, 183)",
"rgba(21, 227, 235)",
"rgba(7, 150, 245)",
"rgba(240, 5, 252)",
"rgba(252, 5, 79)",
"rgb(0,12,255)",
"rgb(17, 252, 5)"],
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});
Đầu ra :
Tạo biểu đồ hình tròn với Chart.js
Để vẽ biểu đồ hình tròn, hãy thay đổi loại biểu đồ thành hình tròn . Bạn cũng có thể muốn đặt hiển thị của chú giải thành true để xem từng phân đoạn của chiếc bánh đại diện cho điều gì:
// Create an instance of Chart object:
new Chart(plots, {
type: 'pie', //Declare the chart type
data: {
labels: months, //Defines each segment
datasets: [{
data: traffic, //Determines segment size
//Color of each segment
backgroundColor: [
"rgba(196, 190, 183)",
"rgba(21, 227, 235)",
"rgba(7, 150, 245)",
"rgba(240, 5, 252)",
"rgba(252, 5, 79)",
"rgb(0,12,255)",
"rgb(17, 252, 5)"],
}]
},
options:{
legend: {display: true}, //This is true by default.
}
});
Đầu ra :
Như bạn đã làm trong các ví dụ trên, bạn có thể thử các biểu đồ khác bằng cách thay đổi loại .
Tuy nhiên, đây là danh sách các loại biểu đồ chart.js được hỗ trợ mà bạn có thể thử bằng cách sử dụng các quy ước mã hóa ở trên:
- quán ba
- đường kẻ
- tiêu tan
- bánh vòng
- pie
- ra đa
- polarArea
- bong bóng
Kết luận
Mặc dù bạn chỉ nắm bắt được đồ thị đường thẳng, hình tròn và biểu đồ thanh trong hướng dẫn này, nhưng mẫu mã để vẽ các biểu đồ khác với chart.js cũng tuân theo quy ước tương tự. Vì vậy, hãy thoải mái chơi với những người khác.
Như đã nói, nếu bạn muốn nhiều hơn những gì chart.js cung cấp, bạn có thể muốn xem thêm một số thư viện biểu đồ JavaScript khác.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/make-a-chart-with-chartjs/
Bình luận (0
)