Η ενότητα ti.charts που μπορείτε να βρείτε στην αγορά του Appcelerator είναι μόνο για iOS. Ήθελα μια ελαφριά λύση που θα μπορούσε να λειτουργήσει τόσο στο Android όσο και στο iOS και να παρέχει τα πιο συνηθισμένα διαγράμματα, μπαρ, γραμμή, πίτα κλπ. Ο πιο απλός τρόπος για να γίνει αυτό ήταν για μένα να χρησιμοποιήσω μια γραφική βιβλιοθήκη javascript μέσα σε μια προβολή ιστού.
Τα προσόντα μου:
- Γρήγορα
- Δεν υπάρχει εξάρτηση από το jQuery
- Κίνηση στην αρχική κλήρωση
- Καλό προεπιλεγμένο στυλ
Τώρα υπάρχουν πολλές βιβλιοθήκες χαρτογράφησης javascript, αλλά όχι πολλά που πληρούν όλα τα παραπάνω προσόντα. Ένα υπερβολικό ποσό εξαρτάται από το jQuery. Έχω μπέρδεψε με μερικούς που εξαρτώνται από το jQuery πριν, και συνήθως έχουν αργούς χρόνους απόδοσης όταν υπάρχουν πάρα πολλά σημεία δεδομένων, και από πάρα πολλούς δεν εννοώ πολλά. Το webView είναι ένα από τα πιο απαιτητικά συστατικά που μπορείτε να χρησιμοποιήσετε, έτσι ώστε όσο περισσότερο μπορείτε να κάνετε για να κρατήσετε τα πράγματα απλά, τόσο καλύτερα.
Περπατώ σε μια νέα βιβλιοθήκη την άλλη μέρα μετά από εβδομάδες αναζήτησης που κάνει ακριβώς αυτό που θέλω. ChartJS. Ακολουθεί ο τρόπος υλοποίησης ενός γραφήματος σε ένα webView, ενώ ταυτόχρονα περνάτε και προσαρμοσμένα σημεία δεδομένων.
Υπάρχουν 3 αρχεία σε αυτό το έργο, εκτός από τα αρχεία που δημιουργούνται αυτόματα
app.js
source / chart.html
source / chart.wvjs - αυτό το αρχείο περιέχει το javascript από το Chart.js που βρίσκεται εδώ
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({ύψος: 200, πλάτος: 320, αριστερά: 0, κορυφή: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html')); win.add (chartView); Κουμπί var = Ti.UI.createButton ({title: 'Regenerate', κορυφή: 220, }); win.add (κουμπί); (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 (', επιλογές), }). win.open ();
Ξεκινάμε δημιουργώντας το παράθυρο, την προβολή ιστού και ένα κουμπί για να αναδιαμορφώσουμε το γράφημα με νέα δεδομένα. Όταν πατηθεί το κουμπί, δημιουργούμε ένα αντικείμενο που ονομάζεται επιλογές. 5 τυχαίοι αριθμοί μεταξύ 1 και 1000 δημιουργούνται και αντιστοιχίζονται στον πίνακα επιλογών options.data.
Το Ti.App.fireEvent καλείται στη συνέχεια με 2 επιχειρήματα. Το renderChart είναι το πρώτο αντικείμενο που πέρασε και αυτό σημαίνει ότι κάπου εκεί έξω στον κώδικα μας, πρέπει να έχουμε έναν αντίστοιχο ακροατή με το ίδιο όνομα. Το δεύτερο στοιχείο είναι το αντικείμενο επιλογών. Τώρα, μπορείτε να αναρωτηθείτε γιατί δεν είχα περάσει έναν πίνακα απευθείας …… Δεν θα λειτουργήσει, ένα αντικείμενο αναμένεται. Τοποθετώντας τη συστοιχία στο αντικείμενο, μπορούμε να περάσουμε αυτά τα δεδομένα στον ακροατή του γεγονότος που θα βρίσκεται μέσα στο αρχείο html.
Για να επικοινωνήσει το webView με το ίδιο το Titanium, είναι απαραίτητη η χρήση των χειριστών συμβάντων όπως αυτό. Το τιτάνιο και το webView χρειάζονται έναν τρόπο να ανοίξουν μια γραμμή επικοινωνίας και αυτό είναι ακριβώς αυτό.
προβολές / chart.html
Η προεπιλεγμένη επέκταση αρχείου της βιβλιοθήκης γραφικών μας είναι .js. Έχω διαπιστώσει ότι μπορεί να υπάρξουν συγκρούσεις με το Titanium όταν χρησιμοποιείτε μια επέκταση .js, οπότε βεβαιωθείτε ότι μετονομάσατε τα αρχεία javascript που καλούνται από ένα webView. Η προτίμησή μου είναι .wvjs, αλλά μπορείτε πραγματικά να χρησιμοποιήσετε ό, τιδήποτε.
Μπορείτε να δείτε τον κώδικα javascript που έχουμε γράψει στο eventListener για το renderChart . Αυτό εκτελείται όταν το fireEvent εκτελείται από τον κώδικα του Τιτανίου. Το πλάτος και το ύψος για τον καμβά καθορίζονται από το javascript αντί για την προσθήκη των χαρακτηριστικών στο HTML, αυτό εξυπηρετεί το σκοπό της εκκαθάρισης όσων υπάρχουν στον καμβά όταν αναγεννούμε ένα νέο χάρτη με νέα δεδομένα.
