Cách xây dựng biểu đồ đơn giản với Chart.js
Trực quan hóa dữ liệu theo cách mà mọi người có thể hiểu được là rất quan trọng trong thời đại ra quyết định dựa trên dữ liệu. Biểu đồ và đồ thị giúp chúng ta hiểu được dữ liệu, xu hướng và mẫu phức tạp một cách dễ dàng.
Chúng ta hãy đi sâu vào quá trình xây dựng biểu diễn đồ họa cơ bản bằng cách sử dụng Chart.js, một thư viện JavaScript quý giá được sử dụng rộng rãi để mô tả thông tin một cách trực quan.
Chart.js là gì?
Chart.js là một công cụ miễn phí giúp các nhà phát triển tạo biểu đồ tương tác cho các ứng dụng web. Phần tử canvas HTML5 hiển thị biểu đồ, cho phép chúng hoạt động trên các trình duyệt hiện đại.
Tính năng của Chart.js
Các tính năng bao gồm:
Chart.js nổi tiếng với thiết kế trực quan cho phép các nhà phát triển tạo ra các biểu đồ có tính tương tác cao và có tính thẩm mỹ cao mà không tốn nhiều công sức viết mã.
Thư viện thể hiện mức độ thích ứng cao bằng cách phục vụ nhiều loại biểu đồ khác nhau như biểu đồ đường, biểu đồ thanh, biểu đồ hình tròn và biểu đồ radar, từ đó đáp ứng nhiều yêu cầu trực quan hóa dữ liệu.
Chart.js là một thư viện biểu đồ rất linh hoạt được thiết kế đặc biệt để mang lại hiệu suất tối ưu trên nhiều thiết bị, bao gồm cả nền tảng máy tính để bàn và thiết bị di động. Các biểu đồ này tự hào về mức độ đáp ứng và khả năng thích ứng ấn tượng, đảm bảo rằng chúng có thể đáp ứng hiệu quả nhu cầu của người dùng bất kể thiết bị hoặc kích thước màn hình ưa thích của họ.
Người ta có thể sửa đổi giao diện và chức năng của biểu đồ được tạo bằng Chart.js bằng cách sử dụng một loạt các tham số có thể tùy chỉnh, thay vì tuân thủ các cài đặt cấu hình tiêu chuẩn. Điều này cho phép các nhà phát triển điều chỉnh trực quan hóa của họ để đáp ứng nhu cầu riêng biệt của dự án của họ.
Thiết lập môi trường
Có hai phương pháp để bạn có thể thiết lập thư viện, một trong hai phương pháp đều phù hợp với nhu cầu của bạn.
⭐ Sử dụng CDN. Chỉ cần đưa thẻ script sau vào phần đầu tài liệu HTML của bạn.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
⭐ Sử dụng Trình quản lý gói. Nếu bạn thích trình quản lý gói, bạn có thể cài đặt Chart.js bằng cách sử dụng npm, Trình quản lý gói nút:
npm install chart.js
Hoặc sợi:
yarn add chart.js
##Cấu trúc HTML cơ bản
Để kết hợp biểu diễn đồ họa trong nội dung HTML của bạn, cần phải bao gồm phần tử canvas với đánh dấu thích hợp. Cấu hình cơ bản cho mục đích này bao gồm các thành phần sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Welcome to My Data Representation</h1>
<canvas id="myChart" width="400" height="150"></canvas>
<script></script>
</body>
</html>
Để mang đến cho trang web một không khí tinh tế, hãy tạo một tài liệu có tên “style.css”. Bằng cách kết hợp các quy tắc CSS tiếp theo trong tệp này, người ta có thể tạo ra giao diện mong muốn.
@import url("https://fonts.googleapis.com/css2?family=Tilt\+Neon&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Tilt Neon", sans-serif;
padding: 2rem 4rem;
}
h1 {
font-size: 3rem;
color: #333;
text-align: center;
padding: 3rem;
}
Tạo biểu đồ đầu tiên của bạn: Ví dụ về biểu đồ thanh
Để minh họa khái niệm này, chúng ta hãy sử dụng biểu đồ thanh đặc biệt phù hợp để đối chiếu các phần thông tin riêng biệt giữa các danh mục khác nhau.
⭐ Trong thẻ script ở cuối HTML của bạn, hãy bắt đầu bằng cách chọn phần tử canvas bằng thuộc tính id của nó:
let canvas = document.getElementById('myChart');
⭐ Tiếp theo, tìm hiểu bối cảnh về cách hiển thị biểu đồ của bạn. Trong trường hợp này, đó là bối cảnh vẽ 2D.
let ctx = canvas.getContext('2d');
⭐ Tiếp theo, khởi tạo biểu đồ mới trên khung vẽ bằng hàm Chart(). Hàm này lấy bối cảnh canvas làm đối số đầu tiên, sau đó là đối tượng của các tùy chọn bao gồm dữ liệu sẽ hiển thị trong biểu đồ.
let options = {};
let myChart = new Chart(canvas, options);
⭐ Tiếp theo, điền vào đối tượng tùy chọn để chỉ định loại biểu đồ, dữ liệu và nhãn bạn muốn trong biểu đồ của mình.
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
}],
},
};
Hiện tại, biểu đồ của bạn xuất hiện như sau:
Tạo kiểu và tùy chỉnh biểu đồ
Chart.js cung cấp nhiều khả năng để cá nhân hóa biểu đồ, bao gồm nhưng không giới hạn ở:
Nâng cao trải nghiệm hình ảnh của bạn bằng cách tùy chỉnh màu biểu đồ bằng Chart.js. Bạn có thể cá nhân hóa không chỉ nền thanh mà còn cả đường viền đường để tạo ra cách trình bày dữ liệu độc đáo và hấp dẫn trực quan.
Chú giải có thể được đặt ở nhiều vị trí khác nhau để nâng cao khả năng đọc và hiểu dữ liệu của biểu đồ. Bằng cách đặt nó ở trên cùng, dưới cùng, bên trái hoặc bên phải, người dùng có thể dễ dàng xác định các mẫu và xu hướng trong cách trình bày trực quan.
Sử dụng chú giải công cụ để cung cấp thông tin toàn diện về các điểm dữ liệu khi di chuột qua, giúp hiểu sâu hơn về nội dung được hiển thị.
Việc điều chỉnh các thuộc tính hoạt ảnh của biểu đồ cho phép người dùng tùy chỉnh cách trình bày trực quan, nâng cao tính năng động và tính tương tác tổng thể của việc trình bày dữ liệu thông qua các cài đặt thời lượng và chuyển tiếp phù hợp.
Hãy xem xét sửa đổi cấu hình tập dữ liệu của bạn bằng cách điều chỉnh đối tượng tùy chọn theo cách minh họa cho sự đơn giản. Chẳng hạn, một cách tiếp cận khả thi là thay đổi đối tượng tùy chọn như được minh họa bên dưới:
let options = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: "Total number of votes on favourite color",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
}],
},
};
Biểu đồ của bạn bây giờ sẽ trông như thế này:
Các phương pháp hay nhất và mẹo về hiệu suất
Để đảm bảo hiệu suất tối ưu khi hiển thị biểu đồ:
Để tối ưu hóa hiệu suất của Chart.js, bạn nên giới hạn số lượng điểm dữ liệu được sử dụng để đẩy nhanh quá trình hiển thị và nâng cao trải nghiệm tổng thể của người dùng.
Nếu cần cập nhật đồ thị hoặc biểu đồ thường xuyên, bạn nên sử dụng chức năng “hủy ()” để loại bỏ mọi biểu diễn được hiển thị trước đó trước khi tạo hình ảnh trực quan mới. Cách tiếp cận này giúp đảm bảo rằng chỉ những dữ liệu mới nhất và chính xác nhất mới được hiển thị trên biểu đồ.
Mẹo để tránh những cạm bẫy thường gặp
Dưới đây là một số cạm bẫy cần tránh:
Đảm bảo rằng thông tin của bạn tuân thủ một cấu trúc thống nhất một cách nhất quán để tránh những mâu thuẫn tiềm ẩn hoặc những biến chứng không lường trước được.
Để tối ưu hóa hiệu suất, nên hạn chế sử dụng hình ảnh động vì việc sử dụng quá mức có thể dẫn đến những hậu quả không mong muốn mặc dù chúng có khả năng nâng cao sự hài lòng của người dùng.
Chart.js: Tăng cường trực quan hóa dữ liệu web
Việc sử dụng Chart.js cho phép tạo ra các biểu diễn dữ liệu có tính tương tác và hấp dẫn trực quan, tạo điều kiện làm sáng tỏ những hiểu biết sâu sắc thích hợp và hình thành các kết luận sáng suốt.
Chart.js cung cấp một phương tiện hiệu quả để thể hiện thông tin một cách trực quan, bất kể trình độ lập trình của một người như thế nào.