Appcelerator pazarında bulabileceğiniz ti.charts modülü yalnızca iOS içindir. Hem Android'de hem de iOS'da çalışabilecek ve grafikler, çubuk, çizgi, pasta vb. En yaygın olanı sağlayan hafif bir çözüm istedim. Bu konuda gitmenin en kolay yolu bir web görünümünde grafik oluşturma javascript kütüphanesi kullanmaktı.
Kalifikasyonlarım:
- Hızlı
- JQuery bağımlılığı yok
- İlk çekilişte animasyon
- Iyi varsayılan stil
Şimdi birçok javascript çizelgesi kütüphanesi var, ama yukarıdaki niteliklerin tümünü karşılayan bir sürü değil. Tutarlı bir miktar jQuery'ye dayanır. Önceden jQuery'ye bağımlı olan bir kaçını karıştırdım ve genellikle çok fazla veri noktası olduğunda yavaş render süreleri var ve çok fazla değil, çok fazla değil. WebView, kullanabileceğiniz en kaynak yoğun bileşenlerden biridir, böylece işleri basitleştirmek için ne kadar kolay yapılabilir, o kadar iyidir.
Geçen hafta arandığımdan sonra istediğim şeyi yaptıktan sonra yeni bir kütüphaneye rastladım. ChartJS. Özel bir veri noktaları aktarırken bir grafiğin webView'e nasıl uygulanacağı aşağıda açıklanmıştır.
Bu projede, otomatik olarak oluşturulan dosyalardan başka 3 dosya var
app.js
kaynak / chart.html
source / chart.wvjs - bu dosya, burada bulunan Chart.js'den javascript'i içerir.
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({yükseklik: 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', yukarı: 220, }); win.add (düğme); button.addEventListener ('click', işlev () {var options = {}; options.data = yeni Dizi (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 çizebilmek için bir düğme oluşturarak başlıyoruz. Düğmeye tıklandığında, seçenekler adı verilen bir nesne oluşturuyoruz. Options.data dizisine 1 ile 1000 arasında 5 rastgele sayı üretilir ve atanır.
Ti.App.fireEvent daha sonra 2 argüman ile çağrılır. renderChart iletilen ilk maddedir ve bu, kodumuzda bir yerde, aynı ada sahip bir karşılık dinleyicisine sahip olmamız gerektiği anlamına gelir. İkinci öğe seçenekler nesnesidir. Şimdi, kendime bir diziyi neden doğrudan geçmediğimi soruyorsunuz …… işe yaramaz, bir nesne bekleniyor. Diziyi nesneye ekleyerek, bu verileri html dosyanızın içine yerleştirilecek olay dinleyicisine iletebiliriz.
WebView'ın Titanium ile iletişim kurması için, bunun gibi olay işleyicilerin kullanılması gerekir. Titanyum ve webView bir iletişim hattı açmak için bir yol gerekir ve bu tam olarak ne yapar.
views / chart.html Grafik Ti.App.addEventListener ('renderChart', işlev (seçenekler) {Ti.API.info ('rendering chart'), var canvas = document.getElementById ('myChart'); canvas.width = 310 canvas.height = 190; var data = {label: ["Jan", "Feb", "Mar", "Apr", "May"], veri kümeleri: [{fillColor: "rgba (220, 220, 220, 0, 5)", strokeColor: "rgba (220, 220, 220, 1)", data: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"); yeni Grafik (ctx) .Bar (veri);} ); Grafik kütüphanemizin varsayılan dosya uzantısı .js'dir. Bir .js uzantısı kullanırken Titanium ile çakışmalar olabileceğini keşfettim, bu yüzden webView'den çağrılan javascript dosyalarınızı yeniden adlandırdığınızdan emin olun. Benim tercihim .wvjs, ama gerçekten her şeyi kullanabilirsin.
RenderChart için eventListener içinde charting javascript kodumuz olduğunu görebilirsiniz . Bu, FireEvent, Titanyum kodumuzdan yürütüldüğünde yürütülür. Tuval için genişlik ve yükseklik, HTML'ye nitelik eklemek yerine javascript'ten belirtilir; bu, yeni bir grafik oluşturduğumuzda, yeni verilerle yeniden oluşturduğumuzda, tuvalde mevcut olanları temizlemenin amacına hizmet eder.
