- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Có khá nhiều thư viện để vẽ biểu đồ trên web, một trong số đó là Chart.js mà tôi đã giới thiệu với các bạn ở bài viết "Tạo biểu đồ chuyên nghiệp với thư viện Chart.js". Bài viết này tôi tiếp tục giới thiệu với các bạn một thư viện khác có tên và cách sử dụng gần giống với Chart.js là Chartist.js. Đây là thư viện JavaScript để vẽ biểu đồ rất dễ sử dụng cũng như khả năng cung cấp nhiều kiểu biểu đồ thông dụng mà các bạn thường sử dụng.
Các bạn tải thư viện Chartist.js tại địa chỉ http://github.com/gionkunz/chartist-js/tree/master/dist và tích hợp vào website với nội dung mã lệnh như sau:
Các bạn khai báo vẽ một biểu đồ đơn giản như sau:
Cuối cùng là thành phần vẽ biểu đồ với nội dung mã lệnh như sau:
Các bạn có thể tìm hiểu thêm về thư viện Chartist.js tại địa chỉ http://gionkunz.github.io/chartist-js.
Các bạn tải thư viện Chartist.js tại địa chỉ http://github.com/gionkunz/chartist-js/tree/master/dist và tích hợp vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/chartist.min.css" rel="stylesheet">
<script src="path/to/chartist.min.js"></script>
JavaScript:
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[1, 3, 5, 4, 2]
]
};
new Chartist.Line('#chartist-js', data);
HTML:
<div id="chartist-js"></div>