Bạn đã biết cách vẽ một biểu đồ trên chính trang html của mình chưa? Vậy thì hãy thử tìm hiểu Chart.js nào!
Master tất cả layout của html css rồi, xây dựng các giao diện được trang web, vậy bạn đã biết vẽ một biểu đồ trên trang web của bạn chưa? Nếu chưa, hãy cùng tìm hiểu cách làm này với Chart.js nào!
Chart.js là gì?
Chart.js là một thư viện biểu đồ với mã nguồn mở, giúp hỗ trợ cho người lập trình có thể tự do xây dựng biểu đồ với các thông số mình muốn mà không cần phải xây dựng qua các đoạn code phức tạp.
Về ưu điểm, Chart.js có thể hỗ trợ người dùng làm những việc sau:
- Miễn phí và được cộng đồng hỗ trợ rất nhiều
- Tương thích tốt với HTML5, đây gần như là điều bắt buộc với thời điểm hiện tại
- Hỗ trợ rất nhiều dạng biểu đồ với các thông số phức tạp
- Hỗ trợ responsive tự động, hiển thị đã dạng dưới nhiều nền tảng khác nhau
Cách cài đặt và nhúng thư viện vào dự án
Chart.js hỗ trợ rất nhiều cách để chúng ta có thể import và sử dụng. Các bạn có thể tải thư viện trực tiếp qua npm dành cho các dự án chạy reactjs, angular,… Hoặc đơn giản nhất là nhúng trực tiếp thư viện vào một file html, nào cùng thử nhé:
Cách 1: Tải thư viện về trực tiếp từ trang chủ
Do thư viện mã nguồn mở trên github nên chúng ta có thể tải trực tiếp những file javascript từ trang chủ của chart.js về máy rồi nhúng trực tiếp vào dự án. Cách này được khuyên dùng với các dự án trang web có quy mô lớn, sẽ giúp cho cải thiện tốc độ tải của trang web, tăng trải nghiệm người dùng
Cách 2: Nhúng thư viện online qua cdn
Cdn (Content Delivery Network) là mạng lưới máy chủ toàn cầu lưu trữ các bản sao thư viện tĩnh trên website. Sử dụng cdn được khuyên dùng với các dự án nhỏ, hệ thống thay vì cần download cả thư viện về thì chỉ cần link đến kho cdn trên mạng lưới. Tuy vậy cách này sẽ làm giảm hiệu năng của website.
Với ví dụ dưới đây các bạn nhúng link cdn, cũng copy dòng này và đặt vào trang html của mình!
<script src=”//cdn.jsdelivr.net/npm/chart.js”></script>
Xây dựng biểu đồ và viết mã javascript để hiển thị
Để có thể vẽ được biểu đồ, chúng ta dùng thẻ canvas. Nếu ai đã từng tìm hiểu về html5, thẻ này hẳn đã không còn xa lạ. Người dùng hoàn toàn có thể chỉnh width, height cho biểu đồ này bằng css nha (css trực tiếp cho thẻ canvas đó)
Lưu ý, phải đặt id cho thẻ để gọi trong đoạn mã javascript bên dưới.
<canvas id=”myChart”></canvas>
Tiếp theo, hãy viết mã javascript để vẽ một biểu đồ đơn giản.
Ví dụ, để vẽ biểu đồ hình cột, các bạn chạy file html để thấy được biểu đồ hiển thị trên giao diện trang web nhé!
Hãy cùng phân tích đoạn mã trên:
- Trước tiên, hãy gọi element thẻ canvas và gán nó vào biến ctx trong js.
- Khởi tạo một đối tượng Chart với 2 tham số, tham số đầu chính là ctx, tham số thứ 2 là một object cấu hình cho biểu đồ của mình
- Các thông số cấu hình cơ bản này:
- type: loại biểu đồ (ở đây là bar)
- data: cấu hình dữ liệu thể hiện trên biểu đồ
- labels: tiêu đề cho từng cột trong biểu đồ
- datasets: cấu hình dữ liệu hiển thị cho từng cột:
- label: tiêu đề chung cho tất cả các cột
- data: dữ liệu cho từng cột, các bạn thay đổi dữ liệu thì biểu đồ cũng thay đổi, lưu ý số dữ liệu phải bằng số tiêu đề labels bên trên nhé
- borderWidth: độ dài của đường viền mỗi cột
- options: các thông số dữ liệu khác
- scales: các thuộc tính về scales
- y: beginAtZero: true; dữ liệu của trục y biểu đồ bắt đầu từ con số 0
Ngoài các thông tin cơ bản bên trên, chart.js còn hỗ trợ các bạn rất nhiều các thuộc tính phức tạp khác, giúp các bạn có thể tự vẽ lên biểu đồ của chính mình!
Để biết chi tiết thêm các thuộc cấu hình biểu đồ khác các bạn tham khảo thêm tại nhé! Chúc các bạn thực hiện thành công!
Bộ môn CNTT
Cao đẳng FPT Mạng cá cược bóng đá
Hà Nội
