Tạo biểu đồ Gauge bằng HTML5 Canvas và Javascript

Trong bài viết ngày hôm nay, mình sẽ chỉ cho các bạn cách tạo biểu đồ Gauge bằng cách sử dụng HTML5 Canvas kết hợp với Javascript. Biểu đồ Gauge sẽ tự động refresh lại sau mỗi 2 giây và số lượng tăng / giảm sẽ được minh họa trong biểu đồ.

tao-bieu-do-gauge-bang-html5-canvas-va-javascript

Xem Demo | Download

HTML

Để tạo biểu đồ, chúng ta chỉ cần khai báo một phần tử canvas như sau :

Sau đó chúng ta chỉ việc định dạng biểu đồ đơn giản như sau :

/*Centering the gauge*/ #canvas display: block; width: 300px; margin: 100px auto; JavaScript

Đây chính là phần quan trọng và là nơi mà các bạn nên dành sự quan tâm nhất. Đọc kỹ mọi chú thích ở mỗi dòng để hiểu rõ hơn về cách tạo và chạy biểu đồ :

Thế là xong, tùy theo mục đích và ứng dụng mà các bạn xây dựng, có thể chỉnh sửa lại ở phần javascript bên trên. Mình hy vọng là qua bài viết này, các bạn sẽ hiểu rõ hơn về cách dùng javascript trong việc tạo biểu đồ.