Модуль ti.charts, який ви можете знайти на ринку Appcelerator, призначений лише для iOS. Мені хотілося легкого рішення, яке могло б функціонувати як на Android, так і на iOS та забезпечувати найпоширеніші діаграми, смуги, лінії, пиріжки тощо. Для мене найпростішим способом було використання бібліотеки javascript-графіків у веб-перегляді.
Моя кваліфікація:
- Швидкий
- Ні залежності jQuery
- Анімація на початковому розіграші
- Хороший стиль за замовчуванням
Зараз існує маса бібліотек javascript-графіків, але не ціла партія, яка відповідає всім вищевказаним кваліфікаціям. Недостатня сума покладається на jQuery. Я раніше переплутався з кількома, які раніше залежать від jQuery, і вони, як правило, мають повільний час візуалізації, коли може бути занадто багато точок даних, і я занадто багато маю на увазі не багато. WebView - це один із найбільш ресурсомістких компонентів, який ви можете використовувати, тому чим більше можна зробити, щоб все було просто, тим краще.
Я натрапив на нову бібліотеку днями після тижнів пошуку, що робить саме те, що я хочу. ChartJS. Ось як реалізувати діаграму у веб-перегляд, одночасно передаючи спеціальні точки даних.
У цьому проекті є 3 файли, окрім автоматично створених файлів
app.js
source / chart.html
source / chart.wvjs - цей файл містить javascript від Chart.js, розташований тут
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({висота: 200, ширина: 320, ліворуч: 0, верх: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var кнопка = Ti.UI.createButton ({назва: 'Відновити', верх: 220, }); win.add (кнопка); button.addEventListener ('click', function () {var options = {}; options.data = новий масив (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'), варіанти);}); win.open ();
Ми починаємо, створюючи наше вікно, веб-перегляд та кнопку, щоб перемалювати графік з новими даними. Після натискання кнопки ми створюємо об'єкт, який називається параметри. 5 випадкових чисел між 1 і 1000 генеруються та присвоюються масиву options.data.
Потім Ti.App.fireEvent викликається двома аргументами. renderChart - це перший елемент, що передається, і це означає, що десь там, в нашому коді, нам потрібно мати відповідного слухача подій з такою ж назвою. Другий пункт - об’єкт параметрів. Тепер ви можете запитати себе, чому я не передав масив безпосередньо …… Це не спрацює, очікується об’єкт. Приєднавши масив до об'єкта, ми можемо передати ці дані слухачеві подій, який буде розташований у нашому HTML-файлі.
Щоб webView спілкувався з самим Titanium, використовуючи подібні обробники подій, необхідно. Титану та веб-перегляду потрібен спосіб відкрити лінію зв'язку, і саме це і робить.
views / chart.html
Розширення файлу за замовчуванням нашої бібліотеки графіків - це .js. Я виявив, що можуть виникати конфлікти з Titanium при використанні розширення .js, тому переконайтесь, що ви перейменовуєте свої файли javascript, які викликаються з веб-перегляду. Моя перевага - .wvjs, але ви дійсно можете використовувати будь-що.
Ви можете бачити, що у нас є наш код javascript-діаграми в eventListener для renderChart . Це виконується, коли fireEvent виконується з нашого коду Titanium. Ширина і висота полотна визначаються з javascripta, а не додавання атрибутів до HTML, це служить метою очищення того, що існує на полотні, коли ми регенеруємо новий графік з новими даними.
