Share Tạo biểu đồ hình tròn với thư viện jQuery Circliful

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trên môi trường web, các bạn có nhiều thư viện JavaScript cũng như thư viện PHP để vẽ các biểu đồ đa dạng về thông tin, hình dạng từ biểu đồ hình cột, biểu đồ dạng sóng hay biểu đồ hình tròn... Bài viết này tôi sẽ giới thiệu với các bạn một thư viện JavaScript được viết dựa trên nền tảng jQuery để vẽ biểu đồ hình tròn khá đẹp mắt. Thư viện mà tôi giới thiệu với các bạn là thư viện jQuery Circliful hỗ trợ khá nhiều các kiểu biểu đồ hình tròn.

Để sử dụng thư viện jQuery Circliful, các bạn cần phải tích hợp thư viện jQuery vào website và truy cập địa chỉ https://github.com/pguso/jquery-plugin-circliful để tải thư viện jQuery Circliful cũng như xem trước các ví dụ.

Các bạn tích hợp thư viện jQuery Circliful vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/jquery.circliful.css" rel="stylesheet">
<script src="path/to/jquery.circliful.min.js"></script>
Và cài đặt biểu đồ với nội dung mã lệnh như sau:
JavaScript:
$(function() {
    $('#circliful-chart').circliful({
        animationStep: 5,
        backgroundBorderWidth: 15,
        foregroundBorderWidth: 5,
        percent: 75
    });
});
Chỉ định nơi vẽ biểu đồ với dòng mã lệnh HTML như sau:
HTML:
<div id="circliful-chart"></div>
 
Back
Top