Accentsconagua

Slik bruker du jQuery med ZingChart

Webdesign
Share

Nettdiagrammer bygget med JavaScript er en fin måte å legge til interaktivitet på appene dine og nettstedene, men hvis du foretrekker å jobbe i jQuery, kan alternativene dine begrenses. Utviklere er ofte igjen for å velge mellom bekvemmelighet eller funksjoner. Alle klokkene og fløyter i 100 linjer med kode eller en enklere versjon på 30? For å adressere dette har teamet på ZingChart utviklet en wrapper for å bruke API-en med jQuery-syntaks, slik at devs raskt kan lage diagrammer med den rike interaktiviteten de vil ha.

Fellesbrukstilfeller

Det er en jQuery-samtale for hver funksjon i ZingChart API-alle 169 av dem. I denne opplæringen vil vi dekke en håndfull av dem i tre av de vanligste bruksområdene:

  1. DOM manipulasjon
  2. Kartmanipulering
  3. Bruke AJAX data

Du kan se hele referansen på Github-siden ZingChart jQuery wrapper.

Skript og filer

Hvis du ikke har en kopi av ZingChart-biblioteket eller jQuery-wrapper, er det noen alternativer:

  • Ta det direkte fra CDN Link - http://cdn.zingchart.com/
  • Last ned den fra GitHub - https://github.com/zingchart/ZingChart-jQuery  
  • Last ned den gjennom Bowerbower install zingchart-jquery)

Setter opp

Sett opp HTML-filen din ved å inkludere ZingChart-biblioteket og eventuelle tilleggsmoduler du trenger. Du må også inkludere jQuery og til slutt ZingChart jQuery wrapper. Innpakningen er kompatibel med jQuery versjoner 1.x og 2.x.

    ZingChart jQuery Wrapper Demo

Initialiserende diagrammer er nå rett frem med .zingchart () anrop. Denne metoden (og alle andre som tar et objekt som parameter) kan ta kartdata direkte eller ved referanse (i dette tilfellet hvor dataene lagres i en variabel data1).

Start med referanse

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

Init med data

// Init diagram med data direkte $ ("# demo-2"). Zingchart (data: type: "linje", "bakgrunnsfarge": "# eff0f0", "tooltip": "padding" 20-20 20 20 "," font-family ":" arial "," font-color ":" # 666666 "," border-radius ": 5," skygge ": 0 linjefarge ":" # 666666 "," tick ": " linjefarge ":" # 666666 "," element ": " fontfarge ":" # 666666 "," fontfamilie " arial "," skala-y ": " linjefarge ":" # 666666 "," kryss ": " linjefarge ":" # 666666 "," element ": " fontfarge " : "# 666666", "font-familie": "arial", plot: aspekt: ​​"spline", "hover-state": "skygge": 0, "markør": "size" 8, "grensebredde": 0, "bakgrunnsfarge": "# 00ccff", "skygge": 0, serie: [verdier: [3,4,10,2,6,5], " linjefarge ":" # 00ccff "," skygge ": 0]);

1. DOM Manipulation

Den første demo er et eksempel på DOM-manipulering ved hjelp av en av lytterne fra wrappen, .nodeHover (). Hovering over en node oppdaterer tabellen under det - spesielt nyttig i situasjoner der du trenger å gi ytterligere informasjon om diagramdata utenfor selve diagrammet. Det er lyttere for alle kartobjekter, samt visse hendelser, for eksempel .feedStart (), .historyBack (), og mange flere.

 // Bind en hendelseslytter til node hover $ ("# demo-1"). NodeHover (// plotMouseOver funksjonsfunksjon () // Få alle verdier for det svevede plottet var plotVals = $ (dette) .getPlotValues ​​(plotindex : this.event.plotindex); // Hent hover node index var idx = this.event.nodeindex; for (var i = 0; i 
Ta en titt på demoen for å se hva som gir oss.
 
 2. Kartmanipulering
Det andre diagrammet viser omvendt-diagrammanipuleringen via DOM. Ved å bruke vanlig jQuery, plasserer vi innspillere på et sett med glidebrytere. Slider-inngangen er kastet til en int og passert til en .setNodeValue () ring for den tilsvarende noden.
 $ ("input [type = 'range']"). hver (funksjon (idx) // Bind inn hendelser til hver skyveknapp $ (dette) .on ("input", funksjon () // Få verdien av hver skyve på input hendelser var newVal = parseInt ($ (this) .val ()); // Angi verdien til den tilsvarende noden til skyveknappenes nye verdi $ ("# demo-2"). setNodeValue (plotindex: 0 , nodeindex: idx, verdi: newVal)););
Ta en titt på demoen på Codepen for å se hva som gir oss.
 3. Laster AJAX Data
Lasting av nye data er et snap. Etter en vellykket .få forespørsel, send resultatene dine inn med en av de mange setter-metodene som .appendSeriesData (), .setSeriesValues ​​(), .modifisere (), .setData (), etc. I eksemplet nedenfor bruker vi .setSeriesValues ​​() å passere i et nytt utvalg av verdier returnert fra vårt AJAX-anrop.
 // Bind en klikkhendelse til knappen $ ("knappen"). Klikk (funksjon () // Utsted en få forespørsel $ .get ('https://api.myjson.com/bins/530az', funksjon ( ) ) // Etter en vellykket forespørsel ... // (varsel har vi ikke engang rørt ZingChart API ennå) .done (funksjon (res) // Lagre de nye dataene i en variabel (helt valgfritt) var newData = res.data; // Angi serieverdiene lik den nyeData $ ("# demo-3"). setSeriesValues ​​("values": [newData]; // Tada! Kartet ditt brukte bare AJAX data. diskoteket.););
Igjen, ta en titt på demoen på Codepen for å se hva vi nå har.
kjeding
Metodekjetting er en av de mest populære funksjonene i jQuery. Denne innpakningen støtter kjetting for alle metoder eller hendelser som returnerer et jQuery-objekt. I stedet for å ringe til diagrammanipuleringsfunksjoner separat, kan du nå koble samtalene dine i en linje:
$ ( "# MyChart") set3dView ( "y-vinkel": 10) resizeChart ( "width": 600, "height": 400)..;
Den fulle demofilen er tilgjengelig for nedlasting.
Konklusjon
Det var en veldig rask gjennomgang, og demonstrerte hvordan du bruker jQuery til ZingChart. Med disse grunnleggende under belte bør du kunne ta dine egne diagrammer mye lenger! Vis oss dine eksempler og gjerne be om tilbakemelding i kommentarene.
ressurser
     
  • http://www.zingchart.com
    •  
  •  @ZingChart på Twitter
    •  
  •  zingchart på Facebook
    •  
  •  zingchart på LinkedIn
    •  
  •  Zingchart på Google+
    •  





	
	
			
	   
	







Webdesign
×