Modul ti.charts yang dapat Anda temukan di pasar Appcelerator hanya untuk iOS. Saya menginginkan solusi yang ringan yang dapat berfungsi pada Android dan iOS dan memberikan grafik, bar, garis, pai, dll yang paling umum. Cara termudah untuk melakukannya adalah bagi saya untuk menggunakan pustaka javascript charting dalam tampilan web.
Kualifikasi saya:
- Cepat
- Tidak ada ketergantungan jQuery
- Animasi pada undian awal
- Penataan standar yang bagus
Sekarang ada banyak pustaka charting javascript, tetapi tidak banyak yang memenuhi semua kualifikasi di atas. Jumlah yang banyak sekali bergantung pada jQuery. Saya telah bermain-main dengan beberapa yang bergantung pada jQuery sebelumnya, dan mereka biasanya memiliki waktu render yang lambat ketika ada terlalu banyak titik data, dan terlalu banyak yang saya maksud tidak banyak. WebView adalah salah satu komponen sumber daya paling intensif yang dapat Anda gunakan, sehingga semakin banyak yang dapat dilakukan untuk menjaga hal-hal sederhana, semakin baik.
Saya menemukan perpustakaan baru beberapa hari yang lalu setelah berminggu-minggu mencari yang melakukan apa yang saya inginkan. ChartJS. Berikut adalah cara menerapkan bagan ke webView, sementara juga melewati titik data khusus.
Ada 3 file dalam proyek ini, selain dari file yang dihasilkan secara otomatis
app.js
source / chart.html
source / chart.wvjs - file ini berisi javascript dari Chart.js yang terletak di sini
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({tinggi: 200, lebar: 320, kiri: 0, atas: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); tombol var = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (tombol); 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', pilihan); }); win.open ();
Kami memulai dengan membuat jendela, tampilan web, dan tombol untuk menggambar ulang grafik dengan data baru. Ketika tombol diklik, kami membuat objek yang disebut opsi. 5 angka acak antara 1 dan 1000 dihasilkan dan ditugaskan ke array options.data.
Ti.App.fireEvent kemudian dipanggil dengan 2 argumen. renderChart adalah item pertama yang dilewati, dan ini berarti bahwa di suatu tempat di luar sana dalam kode kita, kita perlu memiliki pendengar acara yang sesuai dengan nama yang sama. Item kedua adalah objek opsi. Sekarang, Anda mungkin bertanya pada diri sendiri mengapa saya tidak melewatkan array secara langsung …… Itu tidak akan berfungsi, sebuah objek diharapkan. Dengan melampirkan array ke objek, kita bisa meneruskan data itu ke pendengar acara yang akan berlokasi di dalam file html kita.
Agar webView dapat berkomunikasi dengan Titanium sendiri, perlu menggunakan pengendali acara seperti ini. Titanium dan webView memerlukan cara untuk membuka jalur komunikasi, dan itulah yang dilakukan.
views / chart.html
Ekstensi file default dari perpustakaan charting kami adalah .js. Saya menemukan ada kemungkinan konflik dengan Titanium saat menggunakan ekstensi .js, jadi pastikan Anda mengganti nama file javascript Anda yang dipanggil dari webView. Preferensi saya adalah .wvjs, tetapi Anda benar-benar dapat menggunakan apa pun.
Anda dapat melihat kami memiliki kode javascript charting kami dalam eventListener untuk renderChart . Ini dieksekusi ketika fireEvent dijalankan dari kode Titanium kami. Lebar dan tinggi untuk kanvas ditentukan dari javascript alih-alih menambahkan atribut ke HTML, ini melayani tujuan membersihkan apa yang ada di kanvas ketika kita membuat kembali bagan baru dengan data baru.
