Share Vẽ biểu đồ chuyên nghiệp với thư viện Flot

filiallion

Administrator
Staff member
Administrator
Messages
303
Points
10
Language
Tiếng Việt
Trước đây tôi có giới thiệu với các bạn thư viện Chart.js tại bài viết "Tạo biểu đồ chuyên nghiệp với thư viện Chart.js" và thư viện Chartist.js tại bài viết "Vẽ biểu đồ với thư viện Chartist.js" dùng để vẽ biểu đồ trên nền web. Với thư viện Chart.js và Chartist.js, các bạn có thể dễ dàng tạo ra nhiều loại biểu đồ khác nhau, giúp cho việc tạo các chức năng thống kê thêm trực quan, sinh động. 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 tương tự là Flot, đây là thư viện vẽ biểu đồ ra đời từ rất lâu và được sử dụng khá phổ biến hiện nay.

Với thư viện Flot, các bạn sẽ dễ dàng vẽ nhiều loại biểu đồ trình diễn khác nhau chỉ với một vài cài đặt mã JavaScript đơn giản. Để sử dụng thư viện Flot, các bạn truy cập địa chỉ https://github.com/flot/flot và tải về. Sau đó, các bạn tích hợp vào website với nội dung mã lệnh HTML như sau:
HTML:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.flot.js"></script>
Hoặc các bạn cũng có thể cài đặt thư viện Flot trong Nodejs hay React với dòng lệnh NPM sau:
Code:
npm install flot
Bây giờ, các bạn có thể vẽ một biểu đồ đơn giản như sau:
JavaScript:
$(function() {
    var data1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    var data2 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot('#flot-chart', [data1, data2]);
});
Các bạn tạo thêm thành phần chứa biểu đồ như sau:
HTML:
<div id="flot-chart"></div>
Các bạn có thể tìm hiểu thêm về thư viện Flot tại địa chỉ http://www.flotcharts.org.
 
Top