- Messages
- 585
- 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:
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:
Bây giờ, các bạn có thể vẽ một biểu đồ đơn giản như sau:
Các bạn tạo thêm thành phần chứa biểu đồ như sau:
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.
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>
Code:
npm install flot
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]);
});
HTML:
<div id="flot-chart"></div>