Cách tạo biểu đồ với Chart.js
Có một số thư viện JavaScript hợp lý để vẽ các biểu đồ khác nhau, từ biểu đồ thanh đến biểu đồ đường và hơn thế nữa. Nếu bạn đang học cách hiển thị dữ liệu động trên trang web của mình bằng JavaScript, thì Chart.js là một trong những thư viện như vậy mà bạn nên thử.
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.
Mục Lục
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 bộ dữ liệu là nhãn mác, đạ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à 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, 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.jsvà 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 cái đầu của tệp HTML của bạn để liên kết đến 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 TÔI. Ngoài ra, hãy kết nối với tệp CSS (index.css) trong cái đầu và trỏ đến tệp JavaScript (plot.js) của bạn trong phần thân tiết diện.
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 của bạn CSS:
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.jsbạn sẽ thiết lập biểu đồ loại đến hà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");
// Example datasets for X and Y-axes
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Stays on the X-axis
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', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
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 thay đổi lấp đầy có giá trị đối với đúng vậysử dụng nhiều dữ liệu hơn, hoặc là tinh chỉnh màu sắc để xem điều gì sẽ 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ể xóa nó bên trong một tùy chọn tùy chọn tham số.
Các tùy chọn tham số cũng giúp với các tùy chỉnh khác ngoài việc loại bỏ 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 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', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#5e440f', //Color of the dots
borderColor: 'white', //Line color
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
//Specify custom options:
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 biểu đồ loại đến quán ba. Bạn không cần thiết lập lấp đầy tùy chọn vì các thanh kế thừa màu nền tự động:
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#3bf70c', //Color of the bars
}]
},
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 màu nền tham số:
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
//Color of each bar:
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 pie. Bạn cũng có thể muốn đặt màn hình của chú giải thành đúng vậy để xem mỗi 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 hỗ trợ chart.js các loại biểu đồ bạn có thể thử sử dụng các quy ước mã hóa ở trên:
-
quán ba
-
hàng
-
tiêu tan
-
bánh vòng
-
pie
-
ra đa
-
polarArea
-
bong bóng
Chơi xung quanh với Chart.js
Mặc dù bạn mới chỉ tìm hiểu về biểu đồ đườ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.
Đọc tiếp
Giới thiệu về tác giả
