Modul ti.charts yang dapat Anda temukan di pasar Appcelerator hanya untuk iOS. Saya menginginkan solusi ringan yang dapat berfungsi pada Android dan iOS dan menyediakan yang paling umum dari bagan, bar, garis, pai, dll. Cara termudah untuk melakukannya adalah saya menggunakan pustaka javascript charting dalam tampilan web.
Kualifikasi saya:
- Cepat
- Tidak ada ketergantungan jQuery
- Animasi pada undian awal
- Gaya bawaan yang bagus
Sekarang ada banyak pustaka grafik javascript, tetapi tidak banyak yang memenuhi semua kualifikasi di atas. Jumlah yang banyak bergantung pada jQuery. Saya telah mengotak-atik beberapa yang tergantung pada jQuery sebelumnya, dan mereka biasanya memiliki waktu render yang lambat ketika ada terlalu banyak poin data, dan oleh terlalu banyak yang saya maksud tidak terlalu banyak. WebView adalah salah satu komponen yang paling intensif sumber daya yang dapat Anda gunakan, sehingga semakin banyak yang dapat dilakukan untuk menjaga hal-hal sederhana, semakin baik.
Saya menemukan sebuah perpustakaan baru beberapa hari setelah berminggu-minggu mencari yang tidak sesuai dengan yang saya inginkan. ChartJS. Berikut adalah cara menerapkan bagan ke dalam webView, sementara juga meneruskan poin data khusus.
Ada 3 file dalam proyek ini, selain dari file yang dibuat secara otomatis
app.js
sumber / chart.html
source / chart.wvjs - file ini berisi javascript dari Chart.js yang ada di sini
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); var button = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (tombol); button.addEventListener ('klik', 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, kita membuat objek yang disebut opsi. 5 nomor acak antara 1 dan 1000 dihasilkan dan ditetapkan ke array options.data.
Ti.App.fireEvent kemudian dipanggil dengan 2 argumen. renderChart adalah item pertama yang lulus, 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 berhasil, sebuah objek diharapkan. Dengan melampirkan array ke objek, kita dapat meneruskan data tersebut ke pendengar acara yang akan ditempatkan di dalam file html kami.
Untuk webView untuk berkomunikasi dengan Titanium itu sendiri, menggunakan event handler seperti ini diperlukan. Titanium dan webView membutuhkan cara untuk membuka jalur komunikasi, dan itulah yang terjadi.
views / chart.html Bagan Ti.App.addEventListener ('renderChart', fungsi (opsi) {Ti.API.info ('rendering chart'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {label: ["Jan", "Feb", "Mar", "Apr", "May"], dataset: [{fillColor: "rgba (220, 220, 220, 0, 5)", strokeColor: "rgba (220, 220, 220, 1)", data: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"); bagan baru (ctx) .Bar (data);} ); Ekstensi file default dari pustaka grafik kami adalah .js. Saya telah menemukan ada konflik dengan Titanium saat menggunakan ekstensi .js, jadi pastikan Anda mengganti nama file javascript 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 di eventListener untuk renderChart . Ini dijalankan ketika fireEvent dijalankan dari kode Titanium kami. Lebar dan tinggi untuk kanvas ditentukan dari javascript daripada menambahkan atribut ke HTML, ini berfungsi untuk membersihkan apa yang ada di kanvas saat kami meregenerasi grafik baru dengan data baru.
