Appcelerator pazarında bulabileceğiniz ti.charts modülü yalnızca iOS içindir. Hem Android hem de iOS üzerinde çalışabilen ve grafik, çubuk, çizgi, pasta vb. Gibi en yaygın özellikleri sağlayabilen hafif bir çözüm istedim. Bunu yapmanın en basit yolu, bir web görünümünde grafiksel bir javascript kitaplığı kullanmaktı.
Niteliklerim:
- Hızlı
- JQuery bağımlılığı yok
- İlk çekilişe animasyon
- İyi varsayılan stil
Şimdi bir çok javascript çizelgesi kütüphanesi var, ancak yukarıdaki niteliklerin tümünü karşılayan pek bir şey yok. Yanlış bir miktar jQuery'e güveniyor. Daha önce jQuery'ye bağımlı olan birkaç kişiyle uğraştım ve genellikle çok fazla veri noktası olduğunda yavaş işleme sürelerine sahipler ve çok fazla kişi tarafından çok fazla şey ifade etmiyorum. WebView, kullanabileceğiniz en yoğun kaynak gerektiren bileşenlerden biridir, bu yüzden işleri daha basit tutmak için ne kadar çok yapılırsa, o kadar iyi olur.
Geçen hafta aradığım tam olarak istediğimi yapan yeni bir kütüphaneye rastladım. ChartJS. Özel veri noktalarından geçerken grafiğin bir web görünümüne nasıl uygulanacağı aşağıda açıklanmıştır.
Bu projede otomatik olarak oluşturulan dosyalar dışında 3 dosya var.
app.js
kaynak / chart.html
source / chart.wvjs - bu dosya, burada bulunan Chart.js'den bir javascript içerir.
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({height: 200, genişlik: 320, sol: 0, üst: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({title: 'Regenerate', üst: 220, }); win.add (düğme); 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', seçenekler);}); win.open ();
Penceremizi, web görünümümüzü ve grafiği yeni verilerle yeniden çizmek için bir düğme oluşturarak başlıyoruz. Düğme tıklandığında, seçenekler adı verilen bir nesne oluştururuz. 1 ile 1000 arasında 5 rasgele sayı üretilir ve options.data dizisine atanır.
Ti.App.fireEvent daha sonra 2 argümanla çağrılır. renderChart , geçen ilk öğedir ve bu, kodumuzda bir yerde, aynı isimde karşılık gelen bir olay dinleyicisine sahip olmamız gerektiği anlamına gelir. İkinci öğe, seçenekler nesnesidir. Şimdi, neden bir diziyi doğrudan geçemediğimi kendinize sorabilirsiniz …… İşe yaramaz, bir nesne bekleniyor. Diziyi nesneye ekleyerek bu verileri html dosyamızda bulunacak olay dinleyicisine aktarabiliriz.
WebView'in Titanium ile iletişim kurması için, böyle olay işleyicilerinin kullanılması gerekir. Titanium ve webView, bir iletişim hattı açmanın bir yoluna ihtiyaç duyuyor ve bu tam olarak böyle yapıyor.
görüntüleme / chart.html
Grafik kitaplığımızın varsayılan dosya uzantısı .js'dır. Bir .js uzantısı kullanırken Titanyum ile çakışma olabileceğini keşfettim, bu yüzden bir web görünümünden çağrılan javascript dosyalarınızı yeniden adlandırdığınızdan emin olun. Benim tercihim .wvjs, fakat gerçekten ne kullanıyorsanız kullanabilirsiniz.
RenderChart için eventListener içinde çizelge javascript kodumuza sahip olduğumuzu görebilirsiniz. Bu, fireEvent Titanyum kodumuzdan yürütüldüğünde gerçekleştirilir. Tuval için genişlik ve yükseklik, HTML'ye öznitelikler eklemek yerine, javascript'ten belirtilir; bu, yeni verilerle yeni bir tablo oluştururken tuvalde neyin mevcut olduğunu temizleme amacına hizmet eder.
