Модул ти.цхартс који можете пронаћи на тржишту Аппцелератор-а намењен је само за иОС. Желео сам лагано решење које може функционисати и на Андроиду и иОС-у и пружати најчешће графиконе, шипку, линију, пита и слично. Најједноставнији начин да то учиним био је да ја користим графикон јавасцрипт библиотеке у веб приказу.
Моје квалификације:
- Брзо
- Нема јКуери зависности
- Анимација на почетном извлачењу
- Добар подразумевани стил
Сада постоји пуно библиотека за израду ЈаваСцрипта, али не и пуно које испуњавају све горе наведене квалификације. Неодређени износ се ослања на јКуери. Раније сам забрљао са неколицином који су зависни од јКуери-а и обично имају споро време приказивања када има превише података, а под превише мислим на не много. ВебВиев је једна од компоненти са највише ресурса које можете користити, тако да што више можете учинити да ствари буду једноставније, то је боље.
Налетео сам на нову библиотеку пре неки дан, након недеља тражења која ради управо оно што желим. ЦхартЈС. Ево како имплементирати графикон у вебВиев, истовремено пролазећи и прилагођене тачке података.
Постоје 3 датотеке у овом пројекту, осим аутоматски генерисаних датотека
апп.јс
извор / цхарт.хтмл
извор / цхарт.ввјс - ова датотека садржи јавасцрипт са Цхарт.јс који се налази овде
апп.јс вар вин = Титаниум.УИ.цреатеВиндов ({бацкгроундЦолор: '# ффф'}); вар цхартВиев = Ти.УИ.цреатеВебВиев ({висина: 200, ширина: 320, лево: 0, врх: 0, сховСцроллбарс: фалсе, тоуцхЕнаблед: фалсе, урл: '/соурце/цхарт.хтмл'}); вин.адд (цхартВиев); вар буттон = Ти.УИ.цреатеБуттон ({наслов: 'Обнови', врх: 220, }); вин.адд (дугме); буттон.аддЕвентЛистенер ('клик', функција () {вар оптионс = {}; оптионс.дата = нови низ (Матх.флоор (Матх.рандом () * 1001), Матх.флоор (Матх.рандом () * 1001), Матх.флоор (Матх.рандом () * 1001), Матх.флоор (Матх.рандом () * 1001), Матх.флоор (Матх.рандом () * 1001)); Ти.Апп.фиреЕвент ('рендерЦхарт', Опције); }); вин.опен ();
Започињемо креирањем нашег прозора, веб прегледа и дугмета за цртање графикона новим подацима. Кад се кликне на дугме, креирамо објект који се зове опције. Генерише се 5 случајних бројева између 1 и 1000 и додељује се низу оптионс.дата.
Затим се позива Ти.Апп.фиреЕвент са 2 аргумента. рендерЦхарт је прва ставка која је прошла, а то значи да негде тамо у нашем коду морамо имати одговарајућег слушаоца догађаја са истим именом. Друга ставка је објект опција. Сада се можете запитати зашто нисам директно проследио низ …… Неће успети, очекује се објект. Придајући низ објекту, те податке можемо проследити слушаоцу догађаја који ће се налазити у нашој хтмл датотеци.
Да би вебВиев могао комуницирати са самим Титаниум-ом, користећи манипулаторе догађаја попут овог је неопходно. Титанијуму и вебВиев потребан је начин за отварање линије комуникације и управо то чини.
виевс / цхарт.хтмл
Подразумевано проширење датотеке наше библиотеке за графиконе је .јс. Открио сам да може доћи до сукоба са Титаниум-ом када користите .јс екстензију, па се обавезно преименујте у вашим ЈаваСцрипт датотекама које се позивају са вебВиев-а. Моја преференција је .ввјс, али стварно можете користити било шта.
Можете видети да имамо наш ЈаваСцрипт код за графиконе у оквиру ЕвентЛистенер-а за рендерЦхарт . Ово се извршава када се фиреЕвент изврши из нашег Титаниум кода. Ширина и висина платна су одређене из ЈаваСцрипта уместо додавања атрибута ХТМЛ-у, ово служи у сврху рашчишћавања онога што постоји на платну када регенеришемо нови графикон са новим подацима.
