Góc Nhìn Số
  • Trang chủ
  • Công nghệ
  • Phần mềm
  • Video
  • Kiến thức lập trình
  • EBook
  • Tin tức
No Result
View All Result
  • Trang chủ
  • Công nghệ
  • Phần mềm
  • Video
  • Kiến thức lập trình
  • EBook
  • Tin tức
No Result
View All Result
Góc Nhìn Số
No Result
View All Result
Home Kiến thức lập trình

Thư viện ChartJS – Framework vẽ biểu đồ, đồ thị mạnh mẽ

gocnhinso by gocnhinso
22 Tháng Mười Hai, 2020
in Kiến thức lập trình
0
6
SHARES
1k
VIEWS
Share on FacebookShare on Twitter

Thư viện ChartJS là một Framework của JavaScript dựa trên HTML5 để tạo ra các biểu đồ và đồ thị động, có tính tương tác cao và hỗ trợ responsive. Ngoài ra có thể cấu hình biểu đồ hiển thị dữ liệu theo ý muốn hoặc thêm các sự kiện để người dùng tương tác với biểu đồ bằng các hàm do người lập trình tự định nghĩa một cách đơn giản. Đây được xem là một thư viện dễ sử dụng nhất trong các thư viện vẽ biểu đồ mà mình từng sử dụng trong các dự án thiết kế web của mình. Làm chủ được ChartJS và kiến thức lập trình về trực quan hóa dữ liệu là bạn đã có thể thiết kế những website rất chuyên nghiệp rồi đấy!

thư viện chartjs

 Để làm việc với ChartJS, cần tải về thư viện tại trang chủ: https://www.chartjs.org/  và thực hiện liên kết thư viện với dự án bằng dòng lệnh như hình sau.

 Liên kết thư viện ChartJS với dự án
Liên kết thư viện ChartJS với dự án

 Khi muốn hiển thị biểu đồ, cần khai báo tên biểu đồ trong thẻ <canvas> và có thể đặt bất kỳ vị trí nào trong cặp thẻ <body></body> của layout giao diện như hình 2.20.

Khai báo vị trí hiển thị biểu đồ
Khai báo vị trí hiển thị biểu đồ

Để hiển thị được dữ liệu ra màn hình, chúng ta phải khai báo 1 object Chart chứa tất cả các thông tin cần thiết như: datasets, labels. Một vài tham số cơ bản hay dùng được mô tả như bảng dưới đây:

Tham số Loại Mô tả
datasets Array[object] Chứa dữ liệu cho mỗi tập dữ liệu, dữ liệu ở bên trong datasets phụ thuộc vào từng loại Chart khác nhau
labels Array[string] Các nhãn hiển trên trục của Chart, phụ thuộc vào việc định nghĩa xLabels (trục Ox), yLabels – (trục Oy)  Mặc định hiển thị ở trục Ox
xLabels Array[string] Các nhãn hiển thị trên trục Ox của chart
yLabels Array[string] Các nhãn hiển thị trên trục Oy của chart

Việc tùy biến Chart cũng được hỗ trợ một cách tối đa, một số tham số hỗ trợ việc tùy chỉnh Chart hay dùng được mô tả như bảng sau:

Thuộc tính Loại Mặc định Mô tả
responsive Boolean true Tùy chọn giúp bạn thay đổi kích thước của canvas khi vùng chứa của nó thay đổi
events Array[String] [“mousemove”, “mouseout”,  “click”,  “touchstart”, “touchmove”,  “touchend”] Sự kiển mà Chart lắng nghe, sử dụng cho các tooltips và hovering
onClick Function null Được gọi nếu event ở đây là mouseup hoặc click, nó thông qua 1 event và 1 mảng các phần tử active

Một ví dụ đơn giản về việc sử dụng thư viện ChartJS để hiển thị dữ liệu trên biểu đồ đường gồm dòng mã cơ bản như hình sau:

Ví dụ biểu đồ sử dụng ChartJS với những thuộc tính cơ bản
Ví dụ biểu đồ sử dụng ChartJS với những thuộc tính cơ bản

Với đoạn mã như hình trên, sẽ thu được một biểu đồ đường có dạng như hình sau:

Biểu đồ đường hiển thị dữ liệu cơ bản
Biểu đồ đường hiển thị dữ liệu cơ bản

Các dạng biểu đồ phổ biến

Thư viện ChartJS cung cấp người dùng rất nhiều biểu đồ đa dạng phù hợp với nhiều lĩnh vực, nhiều loại dữ liệu. Tuy nhiên, một số biểu đồ hay được sử dụng như: biểu đồ đường, biểu đồ cột, biểu đồ tròn hay biểu đồ liên hợp giữa cột và đường,…

Ví dụ về một số biểu đồ được vẽ bằng thư viện ChartJS hay được sử dụng như các hình sau đây:

Ví dụ về biểu đồ đường trong ChartJS
Ví dụ về biểu đồ đường trong ChartJS

Ví dụ về biểu đồ tròn trong ChartJS
Ví dụ về biểu đồ tròn trong ChartJS

Ví dụ về biểu đồ cột trong ChartJS
Ví dụ về biểu đồ cột trong ChartJS
Ví dụ về biểu đồ kết hợp giữa cột và đường trong ChartJS
Ví dụ về biểu đồ kết hợp giữa cột và đường trong ChartJS

Đọc thêm các kiến thức về tích hợp dữ liệu tại bài viết dưới đây:

Tìm hiểu Tích hợp dữ liệu (Data Integration) là gì?
Tags: chart.jschartjsthư viện chartjsvẽ biểu đồ htmlvẽ đồ thị
gocnhinso

gocnhinso

Mình là Tiên Nguyễn - Admin của GocNhinSo.com, là một Copywriter có nhiều năm kinh nghiệm trong lĩnh vực công nghệ. Hy vọng với chia sẻ của mình sẽ giúp cho các bạn tìm được nhiều điều bổ ích trên website.

Tin Liên Quan

Kiến thức lập trình

Mạng MLP (Multi-layer Perceptron) là gì? Nền tảng của Deep Learning

7 Tháng Sáu, 2021
Công nghệ

Trực quan hóa dữ liệu (Data Visualization) là gì?

21 Tháng Mười Hai, 2020
Công nghệ

Tìm hiểu Tích hợp dữ liệu (Data Integration) là gì?

21 Tháng Mười Hai, 2020
Kiến thức lập trình

Tổng quan SQL Server – Hệ quản trị Cơ sở dữ liệu tốt nhất

20 Tháng Mười Hai, 2020
Kiến thức lập trình

Tổng quan ASP.Net MVC 5 – Nền tảng thiết kế Web mạnh mẽ

20 Tháng Mười Hai, 2020
Next Post

Hướng dẫn thay đổi hiệu ứng sạc iPhone trên iOS 14

  • Trending
  • Comments
  • Latest
Key Office 2019

Microsoft Office 2019 Product Key for Free [100% Working List]

6 Tháng Tư, 2022
Hướng dẫn Active Windows 11 Bản quyền vĩnh viễn - Key Win 11 mới nhất

Cách Active Windows 11 Bản quyền vĩnh viễn – Key Win 11 mới nhất 2022

13 Tháng Mười, 2022
+5 Cách ứng tiền VinaPhone nhanh từ 5k 10k 20k 50k 100k

+5 Cách ứng tiền VinaPhone nhanh từ 5k 10k 20k 50k 100k

12 Tháng Chín, 2022
Cách ứng tiền Viettel từ 5k 10k 20k 50k ngay cả khi còn nợ

Cách ứng tiền Viettel từ 5k 10k 20k 50k ngay cả khi còn nợ

11 Tháng Một, 2023
windows 11 full iso

Download Windows 11 Full ISO mới nhất 2022 – Hướng dẫn cài đặt Win 11

0
Key Office 2019

Microsoft Office 2019 Product Key for Free [100% Working List]

0
Hướng dẫn Active Windows 11 Bản quyền vĩnh viễn - Key Win 11 mới nhất

Cách Active Windows 11 Bản quyền vĩnh viễn – Key Win 11 mới nhất 2022

0

Trò “Lì xì” đốt tiền đầu năm của các Ví điện tử

0
Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

11 Tháng Ba, 2023
WhatsApp là gì?

Whatsapp là gì? WhatsApp có ưu điểm như thế nào?

8 Tháng Ba, 2023
Sến là gì? Sến là những hành động như thế nào?

Sến là gì? Sến là từ mang hành động như thế nào?

3 Tháng Ba, 2023
Cách đăng ký 4G Mobifone 50K 1 tháng ưu đãi data khủng

Cách đăng ký 4G Mobifone 50K 1 tháng nhận data khủng

3 Tháng Ba, 2023

Thông tin hữu ích

Công nghệ internet trên di động tại Việt Nam, xem ngay cách đăng ký 4G Viettel hay danh sách các gói cước 4G Viettel tháng giá rẻ nhất 2022 cho thuê bao di động và cách ứng tiền Viettel đơn giản nhất. Đối tác VNPT về mạng di động 4G VinaPhone trên toàn quốc. Xem thêm cách đăng ký 4G VinaPhone 1 ngày hoặc dùng gói 4G Vina rẻ nhất hiện nay, cách đăng ký 4G Vina hay cách đăng ký 4G Vina

Recent News

Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

11 Tháng Ba, 2023
WhatsApp là gì?

Whatsapp là gì? WhatsApp có ưu điểm như thế nào?

8 Tháng Ba, 2023
Sến là gì? Sến là những hành động như thế nào?

Sến là gì? Sến là từ mang hành động như thế nào?

3 Tháng Ba, 2023
Cách đăng ký 4G Mobifone 50K 1 tháng ưu đãi data khủng

Cách đăng ký 4G Mobifone 50K 1 tháng nhận data khủng

3 Tháng Ba, 2023
Góc Nhìn Số

Góc Nhìn Số là trang tin tức Công nghệ cập nhật liên tục trong ngày. Chia sẻ các góc nhìn đa chiều về Thế giới Công nghệ Thông tin trên toàn cầu nhanh chóng, chính xác nhất.

Follow Chúng Tôi

Danh mục

  • Chưa phân loại
  • Công nghệ
  • Dịch vụ di động
  • Đánh giá
  • EBook
  • Game – Trò chơi
  • Giải pháp bảo mật
  • Hình ảnh
  • Hỏi đáp
  • Kí tự đẹp
  • Kiến thức lập trình
  • Mobifone
  • Office
  • Phần mềm
  • Thủ Thuật
  • Tin tức
  • Trí tuệ nhân tạo
  • Video
  • Viettel
  • VinaPhone
  • Windows
  • Xe

Tin mới

Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

Cách đăng ký 4G Mobifone 90K 1 tháng ưu đãi cực khủng

11 Tháng Ba, 2023
WhatsApp là gì?

Whatsapp là gì? WhatsApp có ưu điểm như thế nào?

8 Tháng Ba, 2023
  • Chính sách bảo mật
  • Giới thiệu về Góc Nhìn Số – Gocnhinso.com
  • Trang chủ

© 2022 by GocNhinSo.com

No Result
View All Result
  • Trang chủ
  • Công nghệ
  • Phần mềm
  • Video
  • Kiến thức lập trình
  • EBook
  • Tin tức

© 2022 by GocNhinSo.com