Trang chủTác giảLiên hệ

Thử chạy chart.js trên web đơn giản

By Lưu Vinh Lộc
Published in Web Programming
December 14, 2021
1 min read

alt text

Giới thiệu

Chart.js là thư viện dành cho JavaScript thuần để vẽ các loại đồ thị phổ biến.

Bên cạnh các Chart lib dành cho riêng các Framework/lib như React, Angular, Vue, Svelte…, thì chart.js có thể dùng được ở mọi nơi mà không cần Framework nào cả.

Cũng chính điều này là điểm yếu của chart.js khi không tận dụng được sức mạnh của các Framework/lib hiện đại.

Ngoài ra source-code của Chart.js không được viết bằng TypeScript.

Web trong bài viết này sẽ chạy thử đoạn source-code giới thiệu của chart.js.

Chuẩn bị

Cài đặt NodeJs có thể dùng nvm - Node Version Manager.

Cài pnpm - NodeJs package manager tiết kiệm dung lượng ổ cứng, tương tự như yarn, npm:

Khởi tạo package.json:

Ta thấy file package.json trống không. Ta tiếp tục cài npm - chart.js:

Output:

Trong file package.json đã có:

Phiên bản chart.js ta đang dùng ở đây là 3.5.0.

Khởi tạo index.html:

Vẽ 1 chart đơn giản

Copy đoạn code dưới đây vào index.html:

Mở trực tiếp file html này bằng browser như Chrome, ta thấy biểu đồ đã được vẽ:

![alt text](https://kipalog.kaopiz.com/uploads/0141/c84a/Screenshot from 2021-08-10 15-38-16.png)

Giải thích source-code

Ta để ý tham số đầu tiên sẽ là ctx - CanvasRenderingContext2D lấy từ DOM element của thẻ canvas thông qua id="myChart".

CanvasRenderingContext2D là 1 phần của bộ Canvas API, cung cấp nội dung 2D được render (vẽ) ra trên bề mặt thẻ canvas.

Thử tưởng tượng thằng này nó cũng giống như 1 khung tranh mà ta có thể vẽ và xóa đi bất cứ cái gì mà ta muốn.

type: 'bar' mô tả loại đồ thị là các cột thẳng đứng có độ cao thấp phụ thuộc vào số liệu.

labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'] là tên của các loại data, được ghi bên dưới cột.

label: '# of Votes' là phần chú thich trên cùng.

backgroundColor, borderColor, borderWidth là style của từng cột theo thứ tự array.

Phần options.scales.y, beginAtZero: true tức là các cột sẽ được vẽ từ mốc data từ 0.

Nếu set là false thì các cột sẽ được vẽ từ mốc data của cột thấp nhất, và cũng vì thế nên cột thấp nhất có độ cao là 0.

Như vậy là ta đã dùng thử xong ví dự cơ bản của chart.js.

Tham khảo

  • w3schools.com/html

Photo by Nicholas Cappello on Unsplash

Đây là bài viết của tôi trên blog cá nhân.


Tags

WEBDEVELOPER

Lưu Vinh Lộc

Developer

Related Posts

Cách dùng từ khóa `readonly` trong class, type, interface của TypeScript
December 14, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Liên hệ quảng cáoThông tinLiên hệ

Social Media