Share Vẽ biểu đồ với thư viện Chartist.js

filiallion · 08/06/2018

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:

HTML:

<link href="path/to/chartist.min.css" rel="stylesheet">
<script src="path/to/chartist.min.js"></script>

Các bạn khai báo vẽ một biểu đồ đơn giản như sau:

JavaScript:

var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
        [1, 3, 5, 4, 2]
    ]
};

new Chartist.Line('#chartist-js', data);

Cuối cùng là thành phần vẽ biểu đồ với nội dung mã lệnh như sau:

HTML:

<div id="chartist-js"></div>

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.

Share Vẽ biểu đồ với thư viện Chartist.js

filiallion

Administrator