Ti.charts मॉड्यूल जिसे आप Appcelerator बाज़ार में पा सकते हैं, केवल iOS के लिए है। मैं एक हल्का समाधान चाहता था जो एंड्रॉइड और आईओएस दोनों पर काम कर सके और चार्ट, बार, लाइन, पाई आदि के सबसे आम प्रदान कर सके। इसके बारे में जाने का सबसे सरल तरीका मेरे लिए एक वेब दृश्य के भीतर चार्टिंग जावास्क्रिप्ट लाइब्रेरी का उपयोग करना था।
मेरी योग्यता:
- उपवास
- कोई jQuery निर्भरता नहीं
- प्रारंभिक ड्रा पर एनीमेशन
- अच्छा डिफ़ॉल्ट स्टाइल
अब बहुत से जावास्क्रिप्ट चार्टिंग लाइब्रेरी हैं, लेकिन एक पूरी बहुत नहीं जो उपरोक्त सभी योग्यताओं को पूरा करती है। एक अयोग्य राशि jQuery पर निर्भर करती है। मैंने कुछ के साथ गड़बड़ कर दी है जो पहले jQuery पर निर्भर हैं, और वे आम तौर पर धीमी गति से रेंडर करते हैं जब बहुत अधिक डेटा पॉइंट्स मिलते हैं, और बहुत से मेरा मतलब है कि पूरी तरह से नहीं। वेबव्यू सबसे अधिक संसाधन गहन घटकों में से एक है जिसे आप उपयोग कर सकते हैं, इसलिए जितना अधिक चीजों को सरल, बेहतर बनाए रखने के लिए किया जा सकता है।
मैं खोज के हफ्तों के बाद दूसरे दिन एक नई लाइब्रेरी में ठोकर खाई, जो मुझे चाहिए था। ChartJS। यहां एक चार्ट को वेबव्यू में लागू करने का तरीका बताया गया है, जबकि कस्टम डेटा पॉइंट भी पास किए जा रहे हैं।
इस परियोजना में स्वचालित रूप से उत्पन्न फ़ाइलों से अलग, 3 फाइलें हैं
app.js
स्रोत / chart.html
source / chart.wvjs - इस फ़ाइल में यहां स्थित Chart.js से जावास्क्रिप्ट शामिल है
app.js var win = Titanium.UI.createWindow ({पृष्ठभूमिचित्र: '# fff'}); var chartView = Ti.UI.createWebView ({ऊंचाई: 200, चौड़ाई: 320, बायां: 0, शीर्ष: 0, showScrollbars: false, touchEnabled: false, url: '/source/charb.html'}); win.add (chartView); var बटन = Ti.UI.createButton ({शीर्षक: 'पुनर्जन्म', शीर्ष: 220, }); win.add (बटन); button.addEventListener ('क्लिक', फंक्शन () {var options = {}; Options.data = new Array (Math.floor (Math.random) (* 1001), Math.floor (गणित .random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001)); Ti.App.fireEvent ('रेंडरचार्ट'), विकल्प);}); win.open ();
हम अपनी विंडो, वेब दृश्य और नए डेटा के साथ ग्राफ़ को फिर से तैयार करने के लिए एक बटन बनाकर शुरू करते हैं। जब बटन पर क्लिक किया जाता है, तो हम विकल्प नामक एक ऑब्जेक्ट बनाते हैं। 1 और 1000 के बीच 5 रैंडम नंबर जेनरेट किए जाते हैं और Options.data एरे को असाइन किए जाते हैं।
Ti.App.fireEvent को फिर 2 तर्कों के साथ कहा जाता है। रेंडरचार्ट पारित किया गया 1 आइटम है, और इसका मतलब है कि हमारे कोड में कहीं बाहर, हमें एक ही नाम के साथ एक संबंधित ईवेंट श्रोता होना चाहिए। दूसरा आइटम विकल्प ऑब्जेक्ट है। अब, आप अपने आप से पूछ सकते हैं कि मैंने एक सरणी को सीधे पास क्यों नहीं किया …… यह काम नहीं करेगा, एक वस्तु की उम्मीद है। सरणी को ऑब्जेक्ट से जोड़कर, हम उस डेटा को उस ईवेंट श्रोता के माध्यम से पास कर सकते हैं जो हमारी HTML फ़ाइल में स्थित होगा।
WebView के लिए टाइटेनियम के साथ खुद को संवाद करने के लिए, इस तरह के इवेंट हैंडलर का उपयोग करना आवश्यक है। टाइटेनियम और वेबव्यू को संचार की एक लाइन खोलने का एक तरीका चाहिए, और ठीक यही है।
विचारों / chart.html
हमारी चार्टिंग लाइब्रेरी का डिफ़ॉल्ट फ़ाइल एक्सटेंशन .js है। मैंने पाया है कि .js एक्सटेंशन का उपयोग करते समय टाइटेनियम के साथ संघर्ष हो सकता है, इसलिए सुनिश्चित करें कि आप अपनी जावास्क्रिप्ट फ़ाइलों का नाम बदलें जिन्हें वेब व्यू से बुलाया जा रहा है। मेरी प्राथमिकता .wjs है, लेकिन आप वास्तव में जो भी उपयोग कर सकते हैं।
आप देख सकते हैं कि हम अपने चार्टिंग जावास्क्रिप्ट कोड को EventListener के अंदर रेंडरचार्ट के लिए रख सकते हैं । यह तब क्रियान्वित किया जाता है जब हमारे टाइटेनियम कोड से फायर इवेंट को निष्पादित किया जाता है। कैनवास के लिए चौड़ाई और ऊंचाई को HTML में विशेषताओं को जोड़ने के बजाय जावास्क्रिप्ट से निर्दिष्ट किया गया है, यह कैनवास में मौजूद क्या है इसे साफ करने के उद्देश्य से कार्य करता है जब हम नए डेटा के साथ एक नया चार्ट प्राप्त करते हैं।
