Chúng ta thường bắt gặp các biểu đồ trên các trang web dựa trên phân tích dữ liệu hoặc một số trang web có chứa các cuộc khảo sát về dân số, tỷ lệ phần trăm,… Các biểu đồ này có thể thay đổi khi các giá trị được vẽ trên biểu đồ bị thay đổi. Để dễ dàng xây dựng các biểu đồ này, thư viện CanvasJS trong JavaScript là một công cụ đắc lực mà bất kì lập trình viên Front-end nào cũng phải biết đến.
Vậy CanvasJS là gì? Chúng ta hãy tìm hiểu về nó trong bài viết này.
CanvasJS là gì?
CanvasJS là một thư viện biểu đồ HTML5, nó có hoạt động trên nhiều thiết bị bao gồm Android, iPhone & iPad, Windows Phone, Microsoft Surface, Desktops, v.v. CanvasJS là một thư viện tạo biểu đồ chuyên nghiệp, nó đi kèm với các themes hấp dẫn và thu hút người dùng, đồng thời nhanh hơn 10 lần so với biểu đồ SVG và Flash thông thường.
Điều này cho phép người dùng tạo các dashboard và biểu đồ giao diện người dùng phong phú, có thể hoạt động trên hầu hết các thiết bị mà không làm ảnh hưởng đến chức năng hoặc bảo trì website của bạn.
- Link thư viện CanvasJS: https://canvasjs.com/
- Các công ty lớn đã sử dụng CanvasJs: NASA, Microsoft, Apple, Intel, Boeing, BMW, SONY, SAMSUNG,…
Tại sao lại chọn CanvasJS?
- API rất đơn giản và trực quan – Bạn có thể bắt đầu với CanvasJS trong vài phút.
- Đi kèm với các chủ đề đẹp và trang nhã – Với hơn 30 loại biểu đồ khác nhau.
- Hiệu suất cao – Gấp 10 lần biểu đồ SVG truyền thống.
- Hoạt động trên hầu hết các thiết bị hiện nay.
- CanvasJS là Độc lập – không phụ thuộc vào bất kỳ thư viện nào khác.
- Có sự hỗ trợ nhiệt tình từ các nhà phát triển.
- Có thể lồng ghép nhiều loại biểu đồ với nhau trên 1 hệ đồ thị.
- Tự động responsive với các độ phân giải màn hình khác nhau.
Tìm hiểu thêm về Chart.js tại đây
Ví dụ cơ bản
Để làm việc với dữ liệu trong biểu đồ trong CanvasJS, chúng ta cần thêm dữ liệu. Tất cả dữ liệu mà chúng ta muốn được vẽ nên được thêm vào một mảng được gọi là “data“. Mọi phần tử của mảng được coi như một đối tượng và được gọi là data series, nó đơn giản chỉ là nhóm các phần tử dữ liệu một cách hợp lý.
Các phần tử hoặc điểm dữ liệu riêng lẻ luôn được gọi là dataPoint. Để hiểu cách dữ liệu hoạt động trong CanvasJS, hãy cùng mình xem qua 1 ví dụ đơn giản sau.
<
html
><
head
><
script
type
="text/javascript"
>
window
.onload =function
() {var
chart =new
CanvasJS.Chart("chartContainer"
, {animationEnabled
:true
,theme
:"light2"
,title
:{text
:"Golds won in 2016 Brazil Olympics"
,fontWeight
:"bolder"
,fontColor
:"#008B8B"
,fontfamily
:"tahoma"
,fontSize
:25
,padding
:10
},data
: [ {type
:"column"
,dataPoints
: [ {label
:"US"
,y
:46
}, {label
:"Britain"
,y
:27
}, {label
:"China"
,y
:26
}, {label
:"Russia"
,y
:19
}, {label
:"Germany"
,y
:17
}, {label
:"Japan"
,y
:12
}, {label
:"france"
,y
:10
}, {label
:"South Korea"
,y
:9
}, {label
:"Italia"
,y
:8
}, {label
:"Australia"
,y
:7
}, ] } ] }); chart.render(); }</
script
><
script
type
="text/javascript"
src
="https://canvasjs.com/assets/script/canvasjs.min.js"
></
script
></
head
><
body
><
div
id
="chartContainer"
style
="height: 300px; width: 100%;"
></
div
></
body
></
html
>Code language:
HTML, XML
(
xml
)
Chú thích các tham số
- animationEnabled: bật (tắt) animation khi tạo biểu đồ Mặc định: false Giá trị: false, true
- theme: chủ đề hiển thị của biểu đồ Mặc định: “light1” Giá trị: “light1″,”light2”, “dark1”, “dark2”
- title: tiêu đề hiển thị của biểu đồ
- type: loại biểu đồ Default: “column” Options: “line”, “column”, “bar”, “area”, “spline”, “splineArea”, “stepLine”
- dataPoints : dữ liệu để vẽ biểu đồ
Kết luận
Trên đây là giới thiệu sơ qua và 1 ví dụ cơ bản về thư viện CanvasJS. Theo mình thì đây là 1 thư viện đáng để sử dụng vì nó hỗ trợ rất nhiều loại biểu đồ và có tài liệu miêu tả rất đầy đủ cùng với giao diện khá đẹp. Nếu bạn muốn thiết kế một biểu đồ cho website của mình thì đừng quên thư viện này, nó sẽ giúp ích cho bạn rất nhiều đấy.
Chúc các bạn thành công!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Tóm Tắt
Chia sẻ
Bài viết liên quan
