Le module ti.charts que vous pouvez trouver sur le marché Appcelerator est uniquement destiné à iOS. Je recherchais une solution légère pouvant fonctionner à la fois sur Android et iOS et fournissant le plus courant des graphiques, barres, lignes, camembert, etc. Le moyen le plus simple consiste à utiliser une bibliothèque de graphiques javascript dans une vue Web.
Mes qualifications:
- Vite
- Aucune dépendance jQuery
- Animation sur le tirage initial
- Bon style par défaut
Maintenant, il y a beaucoup de bibliothèques de graphiques javascript, mais pas beaucoup qui répondent à toutes les qualifications ci-dessus. Un montant démesuré repose sur jQuery. J'ai déjà jeté un œil sur quelques-uns qui dépendent de jQuery et leurs temps de rendu sont généralement lents quand il y a trop de points de données, et par trop, je ne veux pas dire beaucoup. La WebView est l’un des composants les plus gourmands en ressources que vous pouvez utiliser. Par conséquent, plus on peut faire pour garder les choses simples, mieux cela vaut.
L'autre jour, je suis tombé sur une nouvelle bibliothèque après des semaines de recherches qui font exactement ce que je veux. ChartJS. Voici comment implémenter un graphique dans une vue Web tout en transmettant des points de données personnalisés.
Il y a 3 fichiers dans ce projet, en plus des fichiers générés automatiquement
app.js
source / chart.html
source / chart.wvjs - ce fichier contient le javascript de Chart.js situé ici
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({hauteur: 200, largeur: 320, gauche: 0, haut: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({title: 'Regenerate', en haut: 220, }); win.add (bouton); 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', Les options); }); win.open ();
Nous commençons par créer notre fenêtre, notre vue Web et un bouton pour redessiner le graphique avec de nouvelles données. Lorsque le bouton est cliqué, nous créons un objet appelé options. 5 nombres aléatoires compris entre 1 et 1000 sont générés et affectés au tableau options.data.
Ti.App.fireEvent est ensuite appelé avec 2 arguments. renderChart est le premier élément transmis, ce qui signifie que, dans notre code, nous avons besoin d'un écouteur d'événement correspondant portant le même nom. Le deuxième élément est l'objet options. Maintenant, vous pouvez vous demander pourquoi je n'ai pas passé directement un tableau …… Cela ne fonctionnera pas, un objet est attendu. En attachant le tableau à l'objet, nous pouvons transmettre ces données à l'écouteur d'événements situé dans notre fichier html.
Pour que webView communique avec Titanium lui-même, il est nécessaire d’utiliser les gestionnaires d’événements de ce type. Titanium et WebView ont besoin d'un moyen d'ouvrir une ligne de communication, et c'est exactement ce que cela fait.
views / chart.html
L’extension de fichier par défaut de notre bibliothèque de graphiques est .js. J'ai constaté des conflits avec Titanium lors de l'utilisation d'une extension .js, assurez-vous donc de renommer vos fichiers javascript appelés à partir d'une webView. Ma préférence est .wvjs, mais vous pouvez vraiment utiliser n'importe quoi.
Vous pouvez voir que nous avons notre code javascript de cartographie dans eventListener pour renderChart . Ceci est exécuté lorsque fireEvent est exécuté à partir de notre code Titanium. La largeur et la hauteur du canevas sont spécifiées à partir de javascript au lieu d’ajouter les attributs au HTML. Cela permet de vider ce qui existe dans le canevas lorsque nous régénérons un nouveau graphique avec de nouvelles données.
