Accentsconagua

Så här använder du jQuery med ZingChart

Webbdesign
Share

Webbplatskartor med JavaScript är ett bra sätt att lägga till interaktivitet för dina appar och webbplatser, men om du föredrar att arbeta i jQuery kan dina alternativ begränsas. Utvecklare är ofta kvar att välja mellan bekvämlighet eller funktioner. Alla klockor och visslar i 100 linjer kod eller en enklare version i 30? För att ta itu med detta har teamet på ZingChart utvecklat ett omslag för att använda deras API med jQuery-syntax, så att devs snabbt kan bygga diagram med den rika interaktiviteten de vill ha.

Vanliga användningsfall

Det finns ett jQuery-samtal för alla funktioner i ZingChart API-alla 169 av dem. I denna handledning täcker vi en handfull av dem i tre av de vanligaste användningsfallen:

  1. DOM-manipulation
  2. Diagrammanipulation
  3. Använda AJAX data

Du kan se hela referensen på Github-sidan ZingChart jQuery wrappers.

Skript och filer

Om du inte har en kopia av ZingChart-biblioteket eller jQuery-omslaget finns det några alternativ:

  • Ta det direkt från CDN-länken - http://cdn.zingchart.com/
  • Hämta det från GitHub - https://github.com/zingchart/ZingChart-jQuery  
  • Ladda ner det via Bower (bower install zingchart-jquery)

Inställning

Ställ in din HTML-fil genom att inkludera ZingChart-biblioteket och eventuella ytterligare moduler du behöver. Du måste också inkludera jQuery och till sist ZingChart jQuery wrapper. Omslaget är kompatibelt med jQuery versionerna 1.x och 2.x.

    ZingChart jQuery Wrapper Demo

Initialiserande diagram är nu rakt framåt med .zingchart () ring upp. Denna metod (och alla andra som tar ett objekt som en parameter) kan ta diagramdata direkt eller genom referens (i det här fallet där data lagras i en variabel data1).

Init genom hänvisning

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

Init med data

// Init diagram med data direkt $ ("# demo-2"). Zingchart (data: typ: "linje", "bakgrundsfärg": "# eff0f0", "tooltip": "padding" 20-20 20 20 "," font-family ":" arial "," font-color ":" # 666666 " line-color ":" # 666666 "," tick ": " linjefärg ":" # 666666 "," objekt ": " font-color ":" # 666666 " arial "," scale-y ": " linjefärg ":" # 666666 "," tick ": " linjefärg ":" # 666666 "," objekt ": " fontfärg " : "# 666666", "font-family": "arial", plot: aspekt: ​​"spline", "hover-state": "skugga": 0, "markör": "size" 8, "gränsvidd": 0, "bakgrundsfärg": "# 00ccff", "skugga": 0, serie: [värden: [3,4,10,2,6,5], " linjefärg ":" # 00ccff "," skugga ": 0]);

1. DOM Manipulation

Den första demo är ett exempel på DOM-manipulering med hjälp av en av lyssnare från omslaget, .nodeHover (). Hovering över en nod uppdaterar tabellen nedan-speciellt användbar i situationer där du behöver ge ytterligare information om diagramdata utanför själva diagrammet. Det finns lyssnare för alla kartobjekt samt vissa händelser, till exempel .feedStart (), .history (), och många fler.

 // binda en händelse lyssnare till nodhuvudet $ ("# demo-1"). NodeHover (// plotMouseOver funktionsfunktion () // Få alla värden för den svävade plot var plotVals = $ (detta) .getPlotValues ​​(plotindex : this.event.plotindex); // Hämta hover nod index var idx = this.event.nodeindex; för (var i = 0; i 
Ta en titt på demo för att se vad som ger oss.
 
 2. Diagrammanipulation
Det andra diagrammet visar omvänd-diagrammanipulationen via DOM. Med normal jQuery placerar vi inmatade lyssnare på en uppsättning reglage. Slider-ingången är gjuten till en int och passerade till en .setNodeValue () Ring efter motsvarande nod.
 $ ("input [type = 'range']"). Varje (funktion (idx) // Bind in händelser till varje reglage $ (this) .on ("input", function () // Få värdet av varje glidare på ingångshändelser var newVal = parseInt ($ (this) .val ()); // Ange värdet på motsvarande nod till glidarens nya värde $ ("# demo-2"). setNodeValue (plotindex: 0 , nodeindex: idx, värde: newVal)););
Ta en titt på demo på Codepen för att se vad som ger oss.
 3. Laddar AJAX-data
Att ladda nya data är en snap. Efter en framgångsrik .skaffa sig Förfrågan, skicka dina resultat med en av de många setter metoderna som .appendSeriesData (), .setSeriesValues ​​(), .ändra(), .setData (), etc. I exemplet nedan använder vi .setSeriesValues ​​() att skicka i en ny uppsättning värden som returneras från vårt AJAX-samtal.
 // Bind en klickhändelse till knappen $ ("knappen"). Klicka (funktion () // Issue a get request $ .get ('https://api.myjson.com/bins/530az', funktion ( ) ) // Efter en framgångsrik förfrågan ... // (varsel har vi inte ens rört ZingChart API ännu) .done (funktion (res) // Spara de nya data i en variabel (helt tillval) var newData = res.data; // Ställ in serievärdena lika med newData $ ("# demo-3"). setSeriesValues ​​("values": [newData]; // Tada! Ditt diagram har bara använt AJAX-data. discot. ); );
Återigen, ta en titt på demo på Codepen för att se vad vi nu har.
kedja
Metodkedja är en av de mest populära funktionerna i jQuery. Denna omslag stöder kedja för alla metoder eller händelser som returnerar ett jQuery-objekt. I stället för att ringa till diagrammanövreringsfunktionerna separat kan du nu kedja dina samtal i en rad:
$ ( "# MyChart") set3dView ( "y-vinkel": 10) resizeChart ( "bredd": 600, "höjd": 400)..;
Den fullständiga demofilen är tillgänglig för nedladdning.
Slutsats
Det var en väldigt snabb körning, som demonstrerade hur man använder jQuery för ZingChart. Med dessa grunder under ditt bälte borde du kunna ta egna diagram mycket längre! Visa oss dina exempel och gärna fråga om feedback i kommentarerna.
Medel
     
  • http://www.zingchart.com
    •  
  •  @ZingChart på Twitter
    •  
  •  zingchart på Facebook
    •  
  •  zingchart på LinkedIn
    •  
  •  zingchart på google+
    •  





	
	
			
	   
	







Webbdesign
×