מודול ה- ti.charts שתוכלו למצוא בשוק ה- Appcelerator מיועד ל- iOS בלבד. רציתי פיתרון קל משקל שיכול לתפקד גם ב- Android וגם ב- iOS ולספק את הנפוצים ביותר בין תרשימים, סרגל, קו, פאי וכו '. הדרך הפשוטה ביותר לעשות זאת הייתה לי להשתמש בספריית javascript בתרשימים בתצוגת אינטרנט.
הכישורים שלי:
- מהיר
- אין תלות ב- jQuery
- אנימציה על הגרלה ראשונית
- סטיילינג ברירת מחדל טוב
כעת ישנן הרבה ספריות לתרשימי ג'אווה סקריפט, אך לא הרבה שעומדות בכל הכישורים הנ"ל. סכום מוגזם מסתמך על jQuery. התעסקתי עם כמה שהיו תלויים ב- jQuery בעבר, ובדרך כלל יש להם פעמים איטיות לעבד בהן יש יותר מדי נקודות נתונים, ועל ידי יותר מדי אני מתכוון לא הרבה. ה- WebView הוא אחד הרכיבים עתירי המשאבים שבהם תוכלו להשתמש, כך שככל שניתן לעשות כדי לשמור על דברים פשוטים, כך ייטב.
מעדתי על ספרייה חדשה למחרת אחרי שבועות של חיפושים שעושה בדיוק מה שאני רוצה. תרשים JS. כך ניתן ליישם תרשים ב- WebView, תוך העברת נקודות נתונים מותאמות אישית.
בפרויקט זה ישנם 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, הצג סרגל גלילה: שקר, touchEnabled: שגיאה, url: '/ source/chart.html'}); win.add (תרשים תצוגה); כפתור 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 נקרא אז עם שני ארגומנטים. renderChart הוא הפריט הראשון שהועבר, והמשמעות היא שבמקום כלשהו בקוד שלנו, עלינו להאזין לאירוע המקביל עם אותו שם. הפריט השני הוא אובייקט האפשרויות. עכשיו, אתם עשויים לשאול את עצמכם מדוע לא העברתי מערך ישירות …… זה לא יעבוד, צפוי אובייקט. על ידי חיבור המערך לאובייקט, אנו יכולים להעביר נתונים אלה למאזין האירועים שימוקם בתוך קובץ ה- HTML שלנו.
כדי ש- WebView יתקשר עם טיטניום עצמו, השימוש במטפלי האירועים כמו זה נחוץ. טיטניום ו- webView זקוקים לדרך לפתיחת קו תקשורת, וזה בדיוק מה שזה עושה.
צפיות / chart.html
סיומת הקבצים המוגדרת כברירת מחדל של ספריית התרשימים שלנו היא .js. מצאתי שיכולים להיות התנגשויות עם טיטניום בעת השימוש בתוסף .js, אז וודא ששינוי שם של קבצי ה- JavaScript שלך שמתקשרים מ- webView. ההעדפה שלי היא .wvjs, אבל אתה באמת יכול להשתמש בכל דבר.
אתה יכול לראות שיש לנו את קוד ה- javascript בתרשים בתוך EventListener עבור renderChart . זה מבוצע כאשר FireEvent מבוצע מקוד הטיטניום שלנו. הרוחב והגובה של הבד מוגדרים מ- javascript במקום להוסיף את התכונות ל- HTML, זה משרת את המטרה של ניקוי מה קיים בבד כאשר אנו מחדשים תרשים חדש עם נתונים חדשים.
