Beispiel für die Entwicklung eines jQuery-Kreisdiagramms

Beispiel für die Entwicklung eines jQuery-Kreisdiagramms_jquery

WBOY

Freigeben： 2016-05-16 16:22:16

Original

1878 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Entwicklung eines jQuery-Kreisdiagramms. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hier möchten wir Ihnen ein Kreisdiagramm vorstellen, das auf HTML5 Canvas und jQuery basiert. Es ist einfach, ein Kreisdiagramm ohne die Verwendung von Bildern zu implementieren, und es verfügt über viele Attributeinstellungen, was es sehr praktisch macht verwenden. Das Rendering ist wie folgt:

Zuerst müssen wir die JQuery-Bibliotheksdatei und jquery.circliful.min.js in die Seite einführen.

Code kopieren Der Code lautet wie folgt:

Nachdem die erforderlichen JQuery-Dateien eingeführt wurden, können wir jetzt den Grundstil des Kreisdiagramms anpassen:

Code kopieren Der Code lautet wie folgt:

.circliful {

Position: relativ; 

} 

.circle-text, .circle-info, .circle-text-half, .circle-info-half { 

Breite: 100 %;
Position: absolut; 

Textausrichtung: zentriert; 

Anzeige: Inline-Block; 

} 

.circle-info, .circle-info-half { 

Farbe: #999; 

} 

.circliful .fa { 

Rand: -10px 3px 0 3px;
Position: relativ; 

unten: 4px; 

} 

Nachdem der Stil zunächst definiert wurde, müssen Sie nur noch den folgenden Stilcode dort hinzufügen, wo das statistische Diagramm benötigt wird:

Code kopieren

Der Code lautet wie folgt:

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

Nachdem wir den Bereichsblock ausgefüllt haben, müssen wir ihn nun initialisieren: 

Code kopieren

Der Code lautet wie folgt:

So einfach ist das: Mit nur wenigen Klicks können Sie ein ansprechendes Statistikdiagramm erstellen.

Das Folgende ist die grundlegende Attributbeschreibung des Plug-Ins:

Circliful bietet eine Vielzahl von Attributoptionen, basierend auf dem Datenattribut von HTML5. Das Folgende ist die Einstellungsliste.

Parameter	Beschreibung	Standardwert
Datendimension	Die Breite und Höhe des kreisförmigen Bildes betragen px	250
Datentext	Textinhalt wird innerhalb des Kreises angezeigt	leer
Daten-Info	Beschreibungsinformationen werden unter Datentext angezeigt	leer
Datenbreite	Dicke des Kreises px	15
data-fontsize	Kreistextgröße px	15
Datenprozent	Kreisstatistik-Prozentsatz, 1-100	50
data-fgcolor	Vordergrundfarbe des Kreises	#556b2f
data-bgcolor	Hintergrundfarbe des Kreises	#eeeeee
Datenfüllung	Kreisförmige Hintergrundfarbe	leer
Datentyp	Kreisstatistiktyp, kann „halb“ oder „voll“ sein	voll
Datengesamt	Gesamtdatenmenge, verwendet in Verbindung mit dem Datenteil	leer
Datenteil	Datenvolumen, verwendet in Verbindung mit Daten-Gesamt	leer
Datengrenze	Kreisförmiger Stil, Sie können Rahmen hinzufügen, z. B. Inline- oder Umrisslinien	leer
Datensymbol	Fontawesome-Symbolstil, Einzelheiten finden Sie unter: Fontawesome-Website – Symbole	leer
Datensymbolgröße	Symbolgröße	leer
Datensymbolfarbe	Symbolfarbe	leer

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.