Share
Webdiagrammen die zijn gebouwd met JavaScript, zijn een geweldige manier om interactiviteit aan uw apps en sites toe te voegen, maar als u liever in jQuery werkt, kunnen uw opties beperkt zijn. Ontwikkelaars kunnen vaak kiezen tussen gemak of functies. Alle toeters en bellen in 100 regels code of een eenvoudigere versie in 30? Om dit aan te pakken, heeft het team van ZingChart een wrapper ontwikkeld om hun API met jQuery-syntaxis te gebruiken, waardoor ontwikkelaars snel diagrammen kunnen bouwen met de rijke interactiviteit die ze willen.
Er is een jQuery-aanroep voor elke functie in de ZingChart API - alle 169 van hen. In deze zelfstudie behandelen we een handvol van hen in drie van de meest voorkomende gevallen:
U kunt de volledige verwijzing bekijken op de Github-pagina van de ZingChart jQuery-wrapper.
Als u geen kopie van de ZingChart-bibliotheek of jQuery-wrapper hebt, zijn er enkele opties:
Accentsconagua
prieel installeer zingchart-jquery)Stel uw HTML-bestand in door de ZingChart-bibliotheek en eventuele aanvullende modules die u nodig heeft op te nemen. U moet ook jQuery en ten slotte de wrapper ZingChart jQuery opnemen. De wrapper is compatibel met jQuery-versies 1.x en 2.x.
ZingChart jQuery Wrapper Demo
Het initialiseren van grafieken is nu eenvoudig met de .zingchart () noemen. Deze methode (en alle andere die een object als parameter nemen) kan diagramgegevens rechtstreeks of door verwijzing opnemen (in dit geval waarbij de gegevens in een variabele worden opgeslagen) data1).
$ ("# demo-1"). zingchart (data: data1);// Init-diagram met gegevens direct $ ("# demo-2"). Zingchart (data: type: "line", "background-color": "# eff0f0", "tooltip": "padding": " 20 20 20 20 "," font-family ":" arial "," font-color ":" # 666666 "," border-radius ": 5," shadow ": 0," scale-x ": " lijnkleur ":" # 666666 "," aanvinken ": " regelkleur ":" # 666666 "," item ": " font-color ":" # 666666 "," font-family ":" arial "," scale-y ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," item ": " font-color " : "# 666666", "font-family": "arial", plot: aspect: "spline", "hover-state": "shadow": 0, "marker": "size": 8, "border-width": 0, "background-colour": "# 00ccff", "shadow": 0, series: [values: [3,4,10,2,6,5], " lijnkleur ":" # 00ccff "," shadow ": 0]);De eerste demo is een voorbeeld van DOM-manipulatie met behulp van een van de luisteraars van de wrapper, .nodeHover (). Als u de muisaanwijzer over een knooppunt beweegt, wordt de onderstaande tabel bijgewerkt. Dit is met name handig in situaties waarin u aanvullende informatie over diagramgegevens buiten het diagram zelf moet opgeven. Er zijn luisteraars voor alle diagramobjecten en voor bepaalde gebeurtenissen, zoals .feedStart (), .historyBack (), en nog veel meer.
// Bind een gebeurtenislistener aan node hover $ ("# demo-1"). NodeHover (// plotMouseOver-functie functie () // Krijg alle waarden voor de zwevende plot var plotVals = $ (this) .getPlotValues (plotindex : this.event.plotindex); // Get hover node index var idx = this.event.nodeindex; for (var i = 0; i Bekijk de demo om te zien wat dat ons geeft.
2. Grafiekmanipulatie
De tweede grafiek toont de reverse-chart manipulatie via de DOM. Met normale jQuery plaatsen we inputlisteners op een reeks schuifregelaars. Schuifregelaar invoer is gegoten in een int en doorgegeven aan een .setNodeValue () oproep voor het overeenkomstige knooppunt.
$ ("input [type = 'range']"). each (function (idx) // Bind input events aan elke slider $ (this) .on ("input", function () // Verkrijg de waarde van elke schuifregelaar bij invoergebeurtenissen var newVal = parseInt ($ (this) .val ()); // Stel de waarde van het overeenkomende knooppunt in op de nieuwe waarde $ ("# demo-2") van de schuifregelaar. setNodeValue (plotindex: 0 , nodeindex: idx, waarde: newVal)););Bekijk de demo over Codepen om te zien wat dat ons geeft.
3. AJAX-gegevens laden
Het laden van nieuwe gegevens is een fluitje van een cent. Na een succesvolle .krijgen verzoek, geef uw resultaten door met een van de vele settermethoden zoals .appendSeriesData (), .setSeriesValues (), .wijzigen(), .setData (), etc. In het onderstaande voorbeeld gebruiken we .setSeriesValues () om een nieuwe reeks waarden door te geven die worden geretourneerd door onze AJAX-oproep.
// Bind een klikgebeurtenis aan de knop $ ("knop"). Klik (functie () // Geef een get request $ .get ('https://api.myjson.com/bins/530az', function ( ) ) // Na een succesvol verzoek om te ontvangen ... // (merk op dat we nog niet eens de ZingChart API hebben aangeraakt.) .Done (functie (res) // Sla de nieuwe gegevens op in een variabele (geheel optioneel) var newData = res.data; // Stel de reekswaarden in gelijk aan de newData $ ("# demo-3"). setSeriesValues ("values": [newData]); // Tada! Uw grafiek heeft zojuist AJAX-gegevens gebruikt. de discotheek. ); );Nogmaals, bekijk de demo op Codepen om te zien wat we nu hebben.
chaining
Method chaining is een van de meest populaire functies van jQuery. Deze omhullende ondersteunt ketenen voor alle methoden of gebeurtenissen die een jQuery-object retourneren. In plaats van de functies voor diagrammanipulatie apart aan te roepen, kunt u uw oproepen nu op één regel koppelen:
$ ( "# MyChart") set3dView ( "y-angle": 10) resizeChart ( "width" 600, "height": 400)..;
Het volledige demobestand is beschikbaar om te downloaden.
Conclusie
Dat was een zeer snelle doorloop, die aantoonde hoe jQuery voor ZingChart te gebruiken. Met deze basis onder uw riem zou u uw eigen grafieken veel verder moeten kunnen nemen! Toon ons uw voorbeelden en vraag gerust om feedback in de opmerkingen.
Middelen
- http://www.zingchart.com
- @ZingChart op Twitter
- zingchart op Facebook
- zingchart op LinkedIn
- zingchart op Google+
