contoh_jquery pembangunan carta pai jQuery

Contoh dalam artikel ini menerangkan kaedah membangunkan carta pai jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Di sini kami ingin memperkenalkan kepada anda carta pai, circliful, yang berdasarkan kanvas HTML5 dan jQuery Mudah untuk melaksanakan carta pai tanpa menggunakan imej, dan ia mempunyai banyak tetapan atribut, menjadikannya sangat mudah guna. Paparannya adalah seperti berikut:

Mula-mula kita perlu memperkenalkan fail perpustakaan jquery dan jquery.circliful.min.js ke dalam halaman.

Salin kod Kod adalah seperti berikut:

Selepas fail Jquery yang diperlukan diperkenalkan, kini kami boleh menyesuaikan gaya asas carta pai:

Salin kod Kod adalah seperti berikut:

.bulat {
Jawatan: relatif; }
.text-circle, .circle-info, .circle-text-separuh, .circle-info-separuh {
lebar: 100%; kedudukan: mutlak; Selaraskan teks: tengah
Paparan: inline-block;
}
.circle-info, .circle-info-separuh {
Warna: #999; }
.circliful .fa {
Margin: -10px 3px 0 3px; kedudukan: relatif; bawah: 4px; }



Selepas gaya ditakrifkan pada mulanya, anda hanya perlu menambah kod gaya berikut di mana carta statistik diperlukan:





Salin kod

Kod adalah seperti berikut:

lebar-data="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd">

Selepas mengisi blok kawasan, kita kini perlu memulakannya:

Salin kod

Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {

          $('#myStat').circliful(); });

Semudah itu, anda boleh melengkapkan carta statistik yang menarik dengan hanya beberapa klik.

Berikut ialah perihalan atribut asas pemalam:

Circliful menyediakan set pilihan atribut yang kaya, berdasarkan atribut data html5 Berikut ialah senarai tetapan.

Parameter	Penerangan	Nilai lalai
dimensi data	Lebar dan ketinggian imej bulat ialah px	250
teks data	Kandungan teks dipaparkan di dalam bulatan	kosong
maklumat data	Maklumat perihalan dipaparkan di bawah teks data	kosong
lebar data	Ketebalan px bulatan	15
saiz fon data	px saiz teks bulatan	15
peratus data	Peratusan perangkaan bulatan, 1-100	50
data-fgcolor	Warna latar depan bulatan	#556b2f
data-bgcolor	Warna latar belakang bulatan	#eeeeee
isi data	Warna latar belakang isi bulat	kosong
jenis data	Jenis perangkaan bulatan, boleh menjadi "separuh" atau "penuh"	penuh
jumlah data	Jumlah amaun data, digunakan bersama dengan bahagian data	kosong
bahagian data	Jumlah data, digunakan bersama-sama dengan jumlah data	kosong
sempadan data	Gaya bulat, anda boleh menambah sempadan, seperti sebaris atau garis besar	kosong
ikon data	Gaya ikon Fontawesome, untuk butiran, sila rujuk: Laman Web Fontawesome – Ikon	kosong
saiz-ikon-data	Saiz ikon	kosong
warna-ikon data	Warna ikon	kosong

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.