Das ti.charts-Modul, das Sie im Appcelerator-Marktplatz finden können, ist nur für iOS. Ich wollte eine leichte Lösung, die sowohl auf Android als auch auf iOS funktioniert und die gängigsten Diagramme, Balken, Linien, Torten usw. bietet. Der einfachste Weg, dies zu erreichen, war für mich die Verwendung einer JavaScript-Bibliothek in einer Webansicht.
Meine Qualifikationen:
- Schnell
- Keine jQuery-Abhängigkeit
- Animation beim ersten Zeichnen
- Guter Standard-Stil
Jetzt gibt es viele Javascript-Charting-Bibliotheken, aber nicht eine ganze Menge, die alle der oben genannten Qualifikationen erfüllen. Eine übermäßige Menge hängt von jQuery ab. Ich habe mit ein paar, die auf jQuery angewiesen sind, herumgespielt, und sie haben normalerweise langsame Renderzeiten, wenn es zu viele Datenpunkte gibt, und von zu vielen meine ich nicht viel. Das WebView ist eine der ressourcenintensivsten Komponenten, die Sie verwenden können. Je mehr Dinge getan werden können, um die Dinge einfach zu halten, desto besser.
Ich stolperte am anderen Tag nach Wochen der Suche über eine neue Bibliothek, die genau das tut, was ich will. DiagrammJS. Hier erfahren Sie, wie Sie ein Diagramm in ein WebView implementieren und benutzerdefinierte Datenpunkte übergeben.
Es gibt 3 Dateien in diesem Projekt, abgesehen von automatisch generierten Dateien
app.js
source / chart.html
source / chart.wvjs - Diese Datei enthält das Javascript von Chart.js, das sich hier befindet
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({height: 200, width: 320, left: 0, top: 0, showScrollbars: false, touchEnabled: false, URL: '/source/chart.html'}); win.add (Diagrammansicht); var button = Ti.UI.createButton ({Titel: 'Regenerieren', oben: 220, }); win.add (Knopf); button.addEventListener ('click', function () {var options = {}; options.data = neues Array (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001)); Ti.App.fireEvent ('renderChart', Optionen); }); win.open (); Wir beginnen mit der Erstellung unseres Fensters, der Webansicht und einer Schaltfläche, um den Graphen mit neuen Daten neu zu zeichnen. Wenn die Schaltfläche angeklickt wird, erstellen wir ein Objekt namens Optionen. 5 Zufallszahlen zwischen 1 und 1000 werden generiert und dem Array options.data zugewiesen.
Ti.App.fireEvent wird dann mit 2 Argumenten aufgerufen. renderChart ist das erste übergebene Element, und das bedeutet, dass wir irgendwo in unserem Code einen entsprechenden Ereignis-Listener mit demselben Namen haben müssen. Der zweite Eintrag ist das Optionsobjekt. Jetzt können Sie sich fragen, warum ich ein Array nicht direkt übergeben habe ...... Es wird nicht funktionieren, ein Objekt wird erwartet. Indem wir das Array an das Objekt anhängen, können wir diese Daten an den Event-Listener übergeben, der sich in unserer HTML-Datei befindet.
Damit das WebView mit Titanium selbst kommunizieren kann, müssen Event-Handler wie diese verwendet werden. Titanium und das WebView benötigen eine Möglichkeit, eine Kommunikationslinie zu öffnen, und genau das tut dies.
views / chart.html Chart Ti.App.addEventListener ('renderChart', Funktion (Optionen) {Ti.API.info ('rendering chart'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {labels: ["Jan", "Feb", "Mar", "Apr", "Mai"], Datasets: [{fillColor: "rgba (220, 220, 220, 0.5)", strokeColor: "rgba (220, 220, 220, 1)", Daten: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"); neues Diagramm (ctx) .Bar (data);} ); Die Standarddateierweiterung unserer Diagrammbibliothek ist .js. Ich habe festgestellt, dass es Konflikte mit Titan geben kann, wenn Sie eine .js-Erweiterung verwenden. Stellen Sie also sicher, dass Sie Ihre Javascript-Dateien umbenennen, die von einem WebView aufgerufen werden. Meine Vorliebe ist .wvjs, aber Sie können wirklich was auch immer verwenden.
Sie können sehen, dass wir unseren JavaScript-Code im EventListener für renderChart haben . Dies wird ausgeführt, wenn FireEvent von unserem Titanium-Code ausgeführt wird. Die Breite und Höhe für den Canvas werden von JavaScript aus angegeben, anstatt die Attribute dem HTML hinzuzufügen. Dies dient dazu, den Inhalt des Canvas zu bereinigen, wenn wir ein neues Diagramm mit neuen Daten neu generieren.
