El módulo ti.charts que puede encontrar en el mercado de Appcelerator es solo para iOS. Quería una solución liviana que pudiera funcionar tanto en Android como en iOS y proporcionar los gráficos, barras, líneas, pasteles, etc. más comunes. La forma más sencilla de hacerlo fue utilizar una biblioteca de gráficos de JavaScript en una vista web.
Mis calificaciones:
- Rápido
- Sin dependencia de jQuery
- Animación en el sorteo inicial
- Buen estilo predeterminado
Ahora hay muchas bibliotecas de gráficos de JavaScript, pero no muchas que cumplan con todos los requisitos anteriores. Una cantidad excesiva depende de jQuery. He jugado con algunos que dependen de jQuery antes, y generalmente tienen tiempos de renderización lentos cuando hay demasiados puntos de datos, y por demasiados quiero decir que no son muchos. El webView es uno de los componentes más intensivos en recursos que puede usar, por lo tanto, cuanto más se pueda hacer para simplificar las cosas, mejor.
Me encontré con una nueva biblioteca el otro día después de semanas de búsqueda que hace exactamente lo que quiero. ChartJS. Aquí se explica cómo implementar un gráfico en una vista web, mientras se pasan puntos de datos personalizados.
Hay 3 archivos en este proyecto, aparte de los archivos generados automáticamente
app.js
source / chart.html
source / chart.wvjs: este archivo contiene el javascript de Chart.js ubicado aquí
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 (chartView); botón var = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (botón); 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', opciones);}); win.open ();
Comenzamos creando nuestra ventana, vista web y un botón para volver a dibujar el gráfico con nuevos datos. Cuando se hace clic en el botón, creamos un objeto llamado opciones. Se generan 5 números aleatorios entre 1 y 1000 y se asignan a la matriz options.data.
Ti.App.fireEvent se llama con 2 argumentos. renderChart es el primer elemento aprobado, y esto significa que en algún lugar de nuestro código, necesitamos tener un detector de eventos correspondiente con el mismo nombre. El segundo elemento es el objeto de opciones. Ahora, puede preguntarse por qué no pasé una matriz directamente …… No funcionará, se espera un objeto. Al adjuntar la matriz al objeto, podemos pasar esos datos al detector de eventos que se ubicará dentro de nuestro archivo html.
Para que webView se comunique con Titanium, es necesario usar los controladores de eventos como este. Titanium y webView necesitan una forma de abrir una línea de comunicación, y eso es exactamente lo que hace.
views / chart.html
La extensión de archivo predeterminada de nuestra biblioteca de gráficos es .js. He descubierto que puede haber conflictos con Titanium cuando se usa una extensión .js, así que asegúrese de cambiar el nombre de sus archivos javascript que se están llamando desde un webView. Mi preferencia es .wvjs, pero realmente puedes usar lo que sea.
Puede ver que tenemos nuestro código JavaScript de gráficos dentro de eventListener para renderChart . Esto se ejecuta cuando fireEvent se ejecuta desde nuestro código Titanium. El ancho y la altura del lienzo se especifican desde javascript en lugar de agregar los atributos al HTML, esto sirve para aclarar lo que existe en el lienzo cuando regeneramos un nuevo gráfico con nuevos datos.
