Модулът ti.charts, който можете да намерите на пазара на Appcelerator, е само за iOS. Исках леко решение, което може да функционира както на Android, така и на iOS и да предоставя най-често срещаните диаграми, лента, линия, пай и т.н. Най-простият начин за това беше за мен да използвам библиотека с диаграми на JavaScript в уеб изглед.
Моите квалификации:
- Бърз
- Няма зависимост от jQuery
- Анимация при първоначално теглене
- Добър стайлинг по подразбиране
Сега има много библиотеки с диаграми на JavaScript, но не и цяла партида, която отговаря на всички горепосочени квалификации. Недостатъчната сума разчита на jQuery. Преди съм бъркал с няколко, които са зависими от jQuery и обикновено имат бавни времена на изобразяване, когато има твърде много точки от данни, а под твърде много имам предвид не много. WebView е един от най-ресурсоемките компоненти, които можете да използвате, така че колкото повече може да се направи, за да се опростят нещата, толкова по-добре.
Натъкнах се на нова библиотека онзи ден след седмици на търсене, която прави точно това, което искам. ChartJS. Ето как да внедрите диаграма в webView, като същевременно предавате персонализирани данни.
В този проект има 3 файла, освен автоматично генерираните файлове
app.js
източник / 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 ('щракване', функция () {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 се извиква с 2 аргумента. renderChart е първият преминал елемент и това означава, че някъде там в нашия код трябва да имаме съответен слушател на събитията със същото име. Вторият елемент е обектът с опции. Сега може да се запитате защо аз не предадох масив директно …… Няма да работи, очаква се обект. Като прикачим масива към обекта, можем да предадем тези данни на слушателя на събитията, който ще бъде разположен в нашия html файл.
За да може WebView да комуникира със самия Titanium, използвайки обработчиците на събития като този е необходимо. Titanium и webView се нуждаят от начин за отваряне на линия за комуникация и точно това прави това.
гледки / chart.html
Файловото разширение на нашата библиотека за графики е .js. Открих, че може да има конфликти с Titanium при използване на разширение .js, така че не забравяйте да преименувате вашите javascript файлове, които се извикват от webView. Предпочитанието ми е .wvjs, но наистина можете да използвате каквото и да било.
Можете да видите, че имаме нашия JavaScript графичен код в рамките на eventListener за renderChart . Това се изпълнява, когато fireEvent се изпълнява от нашия Titanium код. Ширината и височината за платното са посочени от javas, вместо да добавят атрибутите към HTML, това служи за целта да изчистим какво съществува в платното, когато регенерираме нова диаграма с нови данни.
