Modul ti.charts yang boleh anda dapati di pasaran Appcelerator adalah untuk iOS sahaja. Saya mahukan penyelesaian yang ringan yang boleh berfungsi pada kedua-dua Android dan iOS dan menyediakan carta, bar, baris, pai, dan lain-lain yang paling biasa. Cara paling mudah untuk digunakan adalah untuk menggunakan perpustakaan javascript charting dalam pandangan web.
Kelayakan saya:
- Cepat
- Tiada kebergantungan jQuery
- Animasi pada cabutan awal
- Gaya lalai yang baik
Sekarang terdapat banyak perpustakaan carta javascript, tetapi tidak banyak yang memenuhi semua kelayakan di atas. Jumlah besar bergantung pada jQuery. Saya telah merosakkan dengan beberapa yang bergantung kepada jQuery sebelum ini, dan mereka biasanya mempunyai masa yang perlahan ketika terdapat terlalu banyak titik data, dan terlalu banyak maksudnya tidak banyak. WebView adalah salah satu komponen intensif paling banyak yang dapat anda gunakan, jadi lebih banyak yang dapat dilakukan untuk menjaga sesuatu yang mudah, lebih baik.
Saya tersandung di perpustakaan baru hari berikutnya selepas berminggu-minggu mencari yang betul-betul apa yang saya mahu. ChartJS. Berikut adalah cara untuk melaksanakan carta ke dalam webView, sementara juga melewati titik data tersuai.
Terdapat 3 fail dalam projek ini, selain daripada fail yang dijana secara automatik
app.js
sumber / chart.html
source / chart.wvjs - fail ini mengandungi javascript dari Chart.js yang terdapat 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 butang = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (butang); button.addEventListener ('klik', fungsi () {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', opsyen);}); win.open ();
Kami mulakan dengan membuat tetingkap, paparan web dan butang untuk menggambar semula grafik dengan data baru. Apabila butang diklik, kami membuat objek yang dipanggil opsyen. 5 nombor rawak antara 1 dan 1000 dijana dan diberikan kepada array options.data.
Ti.App.fireEvent kemudian dipanggil dengan 2 argumen. renderChart adalah item 1 yang diluluskan, dan ini bermakna bahawa di suatu tempat di dalam kod kami, kita perlu mempunyai pendengar acara yang sepadan dengan nama yang sama. Item kedua adalah objek pilihan. Kini, anda mungkin bertanya pada diri sendiri mengapa saya tidak lulus secara langsung …… Ia tidak akan berfungsi, objek dijangka. Dengan melampirkan array ke objek, kita boleh lulus data tersebut melalui pendengar acara yang akan ditempatkan dalam fail html kami.
Untuk webView untuk berkomunikasi dengan Titanium sendiri, menggunakan pengendali acara seperti ini diperlukan. Titanium dan webView memerlukan cara untuk membuka saluran komunikasi, dan itulah yang dilakukannya.
pandangan / chart.html
Sambungan fail lalai pustaka carta kami ialah .js. Saya telah mendapati terdapat konflik dengan Titanium apabila menggunakan sambungan .js, jadi pastikan anda menamakan semula fail javascript anda yang dipanggil dari webView. Pilihan saya adalah .wvjs, tetapi anda boleh menggunakan apa sahaja.
Anda dapat melihat kod javascript kami dalam eventListener untuk membuat Chart . Ini dilaksanakan apabila fireEvent dijalankan dari kod Titanium kami. Lebar dan ketinggian untuk kanvas ditentukan dari javascript dan bukan menambah sifat-sifat pada HTML, ini bertujuan untuk membersihkan apa yang terdapat dalam kanvas apabila kita memperbaharui carta baru dengan data baru.
