Share
Mit JavaScript erstellte Webdiagramme bieten eine hervorragende Möglichkeit, Ihren Apps und Websites Interaktivität zu verleihen. Wenn Sie jedoch lieber mit jQuery arbeiten, können Ihre Optionen eingeschränkt sein. Entwickler können oft zwischen Bequemlichkeit und Funktionen wählen. Alle Schnickschnack in 100 Zeilen Code oder eine einfachere Version in 30? Um dies zu beheben, hat das Team von ZingChart einen Wrapper entwickelt, der die Verwendung seiner API mit der jQuery-Syntax ermöglicht, sodass Entwickler schnell Diagramme mit der gewünschten Interaktivität erstellen können.
Es gibt einen jQuery-Aufruf für jede Funktion in der ZingChart-API. In diesem Tutorial behandeln wir eine Handvoll davon in drei der häufigsten Anwendungsfälle:
Sie können die vollständige Referenz auf der Gingub-Seite des ZingChart-jQuery-Wrappers anzeigen.
Wenn Sie nicht über eine Kopie der ZingChart-Bibliothek oder des jQuery-Wrappers verfügen, gibt es einige Optionen:
Accentsconagua
Bower installieren Zingchart-Jquery)Richten Sie Ihre HTML-Datei ein, indem Sie die ZingChart-Bibliothek und alle zusätzlichen Module hinzufügen, die Sie benötigen. Sie müssen auch jQuery und schließlich den ZingChart-jQuery-Wrapper einschließen. Der Wrapper ist mit jQuery-Versionen 1.x und 2.x kompatibel.
ZingChart jQuery Wrapper Demo
Das Initialisieren von Diagrammen ist jetzt mit dem .zingchart () Anruf. Diese Methode (und alle anderen, die ein Objekt als Parameter verwenden) kann Diagrammdaten direkt oder per Referenz übernehmen (in diesem Fall werden die Daten in einer Variablen gespeichert) data1).
$ ("# demo-1"). zingchart (data: data1);// Init-Diagramm mit Daten direkt $ ("# 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 ": " Linienfarbe ":" # 666666 "," Häkchen ": " Linienfarbe ":" # 666666 "," Element ": " Schriftfarbe ":" # 666666 "," Schriftfamilie ":" arial "," scale-y ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," item ": " font-color " : "# 666666", "font-family": "arial", Plot: Aspekt: "Spline", "Hover-State": "Schatten": 0, "Marker": "Größe": 8, "border-width": 0, "background-color": "# 00ccff", "shadow": 0, Serie: [values: [3,4,10,2,6,5]], " Linienfarbe ":" # 00ccff "," Schatten ": 0]);Die erste Demo ist ein Beispiel für die DOM-Manipulation mit einem der Listener des Wrappers, .nodeHover (). Wenn Sie den Mauszeiger über einen Knoten bewegen, wird die darunter liegende Tabelle aktualisiert. Dies ist besonders in Situationen hilfreich, in denen Sie zusätzliche Informationen zu Diagrammdaten außerhalb des Diagramms angeben müssen. Es gibt Listener für alle Diagrammobjekte sowie für bestimmte Ereignisse, wie z .feedStart (), .historyBack (), und viele mehr.
// Einen Event-Listener an den Knoten hover $ binden ("# demo-1"). NodeHover (// plotMouseOver-Funktion function) // Ermitteln Sie alle Werte für den Hover-Plot var plotVals = $ (this) .getPlotValues (plotindex : this.event.plotindex); // Hover-Knoten-Index erhalten var idx = this.event.nodeindex; for (var i = 0; i Schauen Sie sich die Demo an, um zu sehen, was uns das bringt.
2. Kartenmanipulation
Das zweite Diagramm zeigt die umgekehrte Diagrammmanipulation über das DOM. Mit normalem jQuery platzieren wir Input Listener auf eine Reihe von Schiebereglern. Die Eingabe des Schiebereglers wird in eine umgewandelt int und ging an a .setNodeValue () Aufruf für den entsprechenden Knoten.
$ ("input [type = 'range']"). each (Funktion (idx) // Binden Sie die Eingabeereignisse an jeden Schieberegler $ (this) .on ("input", function () // Liefert den Wert von Jeder Schieberegler bei Eingabeereignissen var newVal = parseInt ($ (this) .val ()); // Setzt den Wert des entsprechenden Knotens auf den neuen Wert des Schiebereglers $ ("# demo-2"). setNodeValue (plotindex: 0 , nodeindex: idx, value: newVal)););Schauen Sie sich die Demo auf Codepen an, um zu sehen, was uns das bringt.
3. Laden von AJAX-Daten
Das Laden neuer Daten ist ein Kinderspiel. Nach einem erfolgreichen .erhalten Bitte geben Sie Ihre Ergebnisse mit einer der vielen Setzermethoden wie .appendSeriesData (), .setSeriesValues (), .ändern(), .setData (), usw. In dem folgenden Beispiel verwenden wir .setSeriesValues () um ein neues Array von Werten zu übergeben, die von unserem AJAX-Aufruf zurückgegeben wurden.
// Binden Sie ein Klickereignis an den Button $ ("Button"). Click (function () // Stellen Sie eine Get-Anfrage ab $ .get ('https://api.myjson.com/bins/530az', function ( ) ) // Nach einer erfolgreichen Abrufanforderung… // (Beachten Sie, dass wir die ZingChart-API noch nicht einmal berührt haben.) .Done (function (res) // Speichern Sie die neuen Daten in einer Variablen (völlig optional) var newData = res.data; // Setze die Reihenwerte gleich den neuenData $ ("# demo-3"). setSeriesValues ("values": [newData]); // Tada! Dein Chart hat gerade AJAX-Daten verwendet. Begin die Disco. ); );Schauen Sie sich noch einmal die Demo von Codepen an, um zu sehen, was wir jetzt haben.
Verkettung
Method Chaining ist eine der beliebtesten Funktionen von jQuery. Dieser Wrapper unterstützt die Verkettung von Methoden oder Ereignissen, die ein jQuery-Objekt zurückgeben. Anstatt die Kartenbearbeitungsfunktionen separat aufzurufen, können Sie Ihre Anrufe jetzt in einer Zeile verketten:
$ ("# myChart"). set3dView ("y-angle": 10). resizeChart ("width": 600, "height": 400);Die vollständige Demo-Datei steht zum Download zur Verfügung.
Fazit
Dies war ein sehr schneller Durchlauf, der die Verwendung von jQuery für ZingChart demonstrierte. Mit diesen Grundlagen sollten Sie in der Lage sein, Ihre eigenen Charts noch weiter zu verbessern! Zeigen Sie uns Ihre Beispiele und bitten Sie um Feedback in den Kommentaren.
Ressourcen
- http://www.zingchart.com
- @ZingChart auf Twitter
- zingchart auf Facebook
- zingchart auf LinkedIn
- zingchart bei Google+
