O módulo ti.charts que você pode encontrar no mercado do Appcelerator é apenas para iOS. Eu queria uma solução leve que pudesse funcionar no Android e no iOS e fornecer os gráficos, barras, linhas, torta, etc. mais comuns. A maneira mais simples de fazer isso era usar uma biblioteca javascript de gráficos dentro de uma visualização da Web.
Minhas qualificações:
- Rápido
- Sem dependência de jQuery
- Animação no sorteio inicial
- Bom estilo padrão
Agora, existem muitas bibliotecas de gráficos javascript, mas não muitas que atendem a todas as qualificações acima. Uma quantidade excessiva depende do jQuery. Eu brinquei com alguns que são dependentes do jQuery antes, e eles normalmente têm tempos de renderização lentos quando há muitos pontos de dados e, por muitos, não quero dizer muito. O webView é um dos componentes que mais consomem recursos que você pode usar; portanto, quanto mais você pode fazer para manter as coisas simples, melhor.
Tropecei em uma nova biblioteca outro dia, depois de semanas de pesquisa que fazem exatamente o que eu quero. ChartJS. Aqui está como implementar um gráfico em um webView, além de transmitir pontos de dados personalizados.
Existem 3 arquivos neste projeto, além dos arquivos gerados automaticamente
app.js
source / chart.html
source / chart.wvjs - esse arquivo contém o javascript do Chart.js localizado aqui
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ão var = Ti.UI.createButton ({title: 'Regenerar', parte superior: 220, }); win.add (botão); button.addEventListener ('clique', function () {var options = {}; options.data = new Array (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001) Você está aqui: Página Inicial '' Notícias '' Notícias '' Notícias '' Notícias '' Notícias '' Notícias '' Notícias '' Notícias '' Motorista morre após colidir com carreta, opções);}); win.open ();
Começamos criando nossa janela, visualização na web e um botão para redesenhar o gráfico com novos dados. Quando o botão é clicado, criamos um objeto chamado opções. 5 números aleatórios entre 1 e 1000 são gerados e atribuídos à matriz options.data.
Ti.App.fireEvent é então chamado com 2 argumentos. renderChart é o primeiro item passado e isso significa que em algum lugar do código, precisamos ter um ouvinte de evento correspondente com o mesmo nome. O segundo item é o objeto de opções. Agora, você pode se perguntar por que não passei uma matriz diretamente …… Não vai funcionar, é esperado um objeto. Ao anexar a matriz ao objeto, podemos passar esses dados para o ouvinte de eventos que estará localizado em nosso arquivo html.
Para que o webView se comunique com o próprio Titanium, é necessário usar os manipuladores de eventos como este. O titânio e o webView precisam de uma maneira de abrir uma linha de comunicação, e é exatamente isso que isso faz.
views / chart.html
A extensão de arquivo padrão da nossa biblioteca de gráficos é .js. Descobri que pode haver conflitos com o Titanium ao usar uma extensão .js, portanto, renomeie os arquivos javascript que estão sendo chamados a partir de um webView. Minha preferência é .wvjs, mas você pode realmente usar o que quer.
Você pode ver que temos nosso código javascript de gráficos no eventListener para renderChart . Isso é executado quando o fireEvent é executado a partir do nosso código Titanium. A largura e a altura da tela são especificadas no javascript, em vez de adicionar os atributos ao HTML. Isso serve para limpar o que existe na tela quando regeneramos um novo gráfico com novos dados.
