Das ti.charts-Modul, das Sie auf dem Appcelerator-Marktplatz finden, ist nur für iOS verfügbar. Ich wollte eine kompakte Lösung, die sowohl auf Android als auch auf iOS funktioniert und die gängigsten Diagramme, Balken, Linien, Torten usw. bereitstellt. Am einfachsten war es für mich, eine Diagramm-Javascript-Bibliothek in einer Webansicht zu verwenden.
Meine Qualifikationen:
- Schnell
- Keine jQuery-Abhängigkeit
- Animation bei der ersten Auslosung
- Gutes Standard-Styling
Jetzt gibt es viele Javascript-Diagrammbibliotheken, aber nicht viele, die alle oben genannten Voraussetzungen erfüllen. Ein übermäßiger Betrag hängt von jQuery ab. Ich habe mit ein paar rumgespielt, die vorher von jQuery abhängig waren, und sie haben normalerweise langsame Renderzeiten, wenn es zu viele Datenpunkte gibt, und mit zu vielen meine ich nicht viel. Das WebView ist eine der ressourcenintensivsten Komponenten, die Sie verwenden können. Je mehr getan werden kann, um die Dinge einfach zu halten, desto besser.
Neulich bin ich nach wochenlanger Suche auf eine neue Bibliothek gestoßen, die genau das macht, was ich will. ChartJS. Hier erfahren Sie, wie Sie ein Diagramm in eine Webansicht implementieren und gleichzeitig 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 ({Höhe: 200, Breite: 320, links: 0, oben: 0, showScrollbars: false, touchEnabled: false, URL: '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (button); button.addEventListener ('click', function () {var options = {}; options.data = new 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 zum erneuten Zeichnen des Diagramms mit neuen Daten. Wenn Sie auf die Schaltfläche klicken, erstellen Sie ein Objekt mit dem Namen options. Es werden 5 Zufallszahlen zwischen 1 und 1000 generiert und dem Array options.data zugewiesen.
Ti.App.fireEvent wird dann mit 2 Argumenten aufgerufen. renderChart ist das erste Element, das übergeben wird. Dies bedeutet, dass wir irgendwo in unserem Code einen entsprechenden Ereignis-Listener mit demselben Namen benötigen. Der zweite Punkt ist das Optionsobjekt. Nun fragen Sie sich vielleicht, warum ich ein Array nicht direkt übergeben habe. Es funktioniert nicht, es wird ein Objekt erwartet. Durch Anhängen des Arrays an das Objekt können wir diese Daten an den Ereignis-Listener weiterleiten, der sich in unserer HTML-Datei befindet.
Damit das WebView mit Titanium selbst kommunizieren kann, müssen die Ereignisbehandlungsroutinen wie diese verwendet werden. Titan und das WebView brauchen eine Möglichkeit, eine Kommunikationslinie zu eröffnen, und genau das ist es, was dies bewirkt.
views / chart.html
Die Standarddateierweiterung unserer Diagrammbibliothek ist .js. Ich habe festgestellt, dass bei Verwendung der Erweiterung .js Konflikte mit Titanium auftreten können. Vergewissern Sie sich daher, dass Sie die von einer WebView aufgerufenen Javascript-Dateien umbenennen. Ich bevorzuge .wvjs, aber Sie können wirklich alles verwenden.
Sie können sehen, dass wir unseren Diagramm-Javascript-Code im eventListener für renderChart haben . Dies wird ausgeführt, wenn fireEvent über unseren Titanium-Code ausgeführt wird. Die Breite und Höhe für die Zeichenfläche werden in Javascript angegeben, anstatt die Attribute zum HTML hinzuzufügen. Dies dient dem Zweck, die im Zeichenbereich vorhandenen Elemente zu löschen, wenn ein neues Diagramm mit neuen Daten erstellt wird.
