Accentsconagua

Cum se utilizează jQuery cu ZingChart

Web design
Share

Graficele Web construite cu JavaScript sunt o modalitate foarte bună de a adăuga interactivitate aplicațiilor și site-urilor dvs., dar dacă preferați să lucrați în jQuery, opțiunile dvs. pot fi limitate. Dezvoltatorii sunt adesea lăsați să aleagă între confort sau caracteristici. Toate clopotele și fluierele în 100 de linii de cod sau o versiune mai simplă în 30? Pentru a rezolva acest lucru, echipa de la ZingChart a dezvoltat un wrapper pentru a-și folosi API-ul cu sintaxa jQuery, permițând dezvoltatorilor să construiască rapid diagrame cu o interactivitate bogată pe care o doresc.

Cazuri de utilizare obișnuită

Există un apel jQuery pentru fiecare funcție din API-ul ZingChart - toate 169 dintre ele. În acest tutorial vom acoperi câteva dintre ele în trei dintre cele mai frecvente cazuri de utilizare:

  1. Manipularea DOM
  2. Manipularea graficelor
  3. Utilizarea datelor AJAX

Puteți vedea referința completă pe pagina Github din ZingChart jQuery wrapper.

Scripturi și fișiere

Dacă nu aveți o copie a bibliotecii ZingChart sau a pachetului jQuery, există câteva opțiuni:

  • Luați-o direct de pe CDN Link - http://cdn.zingchart.com/
  • Descărcați-l de la GitHub - https://github.com/zingchart/ZingChart-jQuery  
  • Descărcați-l prin Bower (bower instalați zingchart-jquery)

Configurare

Configurați fișierul HTML prin includerea bibliotecii ZingChart și a oricăror module suplimentare de care aveți nevoie. De asemenea, va trebui să includeți jQuery și, în sfârșit, pachetul ZingChart jQuery. Împachetul este compatibil cu versiunile jQuery 1.x și 2.x.

    ZingChart jQuery Wrapper Demo

Inițializarea diagramelor este acum directă cu .zingchart () apel. Această metodă (și toate celelalte care au un obiect ca parametru) pot lua datele din diagramă direct sau prin referință (în cazul în care datele sunt stocate într-o variabilă date1).

Inițiți prin referință

$ ("# demo-1"); zingchart (date: data1);

Inițiți cu date

/ / / / / / / / / / / / / / / / / / / / / 20 20 20 20 "," font-family ":" arial "," font-color ":" # 666666 " line ":" # 666666 "," font-family ":" # 666666 "," aripă: "line-color": "# 666666", "element": "font-color" : "Aspectul:" spline "," hover-state ": " shadow ": 0," marker ": " size " 8, "border-width": 0, "background-color": "# 00ccff", "shadow" line-color ":" # 00ccff "," shadow ": 0]);

1. Manipularea DOM

Primul demo este un exemplu de manipulare DOM utilizând unul dintre ascultători din pachet, .nodeHover (). Plasarea cursorului pe un nod actualizează tabelul de mai jos - este util în special în situațiile în care trebuie să furnizați informații suplimentare despre datele din diagramă în afara graficului propriu-zis. Există ascultători pentru toate obiectele diagramelor, precum și anumite evenimente, cum ar fi .feedStart (), .historyBack (), si multe altele.

 // Legați un ascultător de evenimente la nodul hover $ ("# demo-1"). NodeHover (// funcția plotMouseOver funcția () // Obțineți toate valorile pentru plotul plutind var plotVals = $ (this) .getPlotValues ​​(plotindex : this.event.plotindex); // Obține indexul nodului hover var idx = this.event.nodeindex; pentru (var i = 0; i 
Uitați-vă la demo pentru a vedea ce ne dă.
 
 2. Manipularea graficelor
A doua diagramă demonstrează manipularea graficului invers prin DOM. Folosind jQuery normal, plasăm ascultători de intrare pe un set de glisoare. Introducerea glisantului este distribuită pe un int și a trecut la a .setNodeValue () apel pentru nodul corespunzător.
 $ () (input [type = 'range'] ") fiecare functie (idx) // Bind evenimente de intrare pentru fiecare cursor $ (this) .on (" input ", function fiecare glisor pe evenimentele de intrare var newVal = parseInt ($ (this) .val ()); // Setați valoarea nodului corespunzător la noua valoare a cursorului $ ("# demo-2") setNodeValue (plotindex: 0 , nodeindex: idx, valoare: newVal)););
Uitați-vă la demo-ul de pe Codepen pentru a vedea ce ne dă.
 3. Încărcarea datelor AJAX
Încărcarea datelor noi este un moment. După un succes .obține solicitați, treceți rezultatele dvs. cu una din numeroasele metode de setare, cum ar fi .appendSeriesData (), .setSeriesValues ​​(), .modifica(), .setData (), etc În exemplul de mai jos, vom folosi .setSeriesValues ​​() pentru a trece într-o gamă nouă de valori returnate din apelul nostru AJAX.
 // Legați un eveniment de clic la butonul $ ("buton"). Faceți clic pe (funcția () // Emiteți o cerere de solicitare $ .get ('https://api.myjson.com/bins/530az', funcția ) ) // După o solicitare de primire de succes ... // (notați că nu am atins încă API-ul ZingChart) .done (funcția (res) // Stocați noile date într-o variabilă (complet opțională) var newData = res.data; // Setați valorile seriei egale cu newData $ ("# demo-3") setSeriesValues ​​("values": [newData]); discotecă. ); );
Din nou, aruncăm o privire la demo-ul de pe Codepen pentru a vedea ce avem acum.
înlănțuirea
Legarea de metode este una dintre cele mai populare caracteristici ale jQuery. Acest wrapper acceptă înlănțuirea pentru orice metode sau evenimente care returnează un obiect jQuery. În loc să apelați separat funcțiile de manipulare a diagramelor, puteți să le lansezi acum într-o singură linie:
$ ( "# MyChart") set3dView ( "y-unghi": 10) resizeChart ( "lățime": 600, "înălțime": 400)..;
Fișierul demo complet este disponibil pentru descărcare.
Concluzie
A fost o încercare foarte rapidă, demonstrând cum să folosiți jQuery pentru ZingChart. Cu aceste elemente de bază în centură, ar trebui să puteți lua propriile tale diagrame mult mai departe! Arătați-ne exemplele dvs. și nu ezitați să cereți feedback în comentarii.
Resurse
     
  • http://www.zingchart.com
    •  
  •  @ ZingChart pe Twitter
    •  
  •  zingchart pe Facebook
    •  
  •  zingchart pe LinkedIn
    •  
  •  zingchart pe Google+
    •  





	
	
			
	   
	







Web design
×