Ti.charts मॉड्यूल जो आप एपसेलरेटर मार्केटप्लेस में पा सकते हैं केवल आईओएस के लिए है। मैं एक हल्का समाधान चाहता था जो एंड्रॉइड और आईओएस दोनों पर काम कर सके और चार्ट, बार, लाइन, पाई इत्यादि का सबसे आम प्रदान कर सके। इसके बारे में जाने का सबसे आसान तरीका मेरे लिए वेब व्यू के भीतर चार्टिंग जावास्क्रिप्ट लाइब्रेरी का उपयोग करना था।
मेरी योग्यताएं:
- उपवास
- कोई jQuery निर्भरता नहीं
- प्रारंभिक ड्रा पर एनीमेशन
- अच्छा डिफ़ॉल्ट स्टाइल
अब जावास्क्रिप्ट चार्टिंग पुस्तकालयों में बहुत सारे हैं, लेकिन उपर्युक्त सभी योग्यताओं को पूरा करने वाले बहुत सारे नहीं हैं। एक अनोखा राशि jQuery पर भरोसा करती है। मैंने कुछ ऐसे लोगों के साथ गड़बड़ कर दी है जो पहले jQuery पर निर्भर हैं, और जब आमतौर पर बहुत अधिक डेटा पॉइंट होते हैं, तो वे आमतौर पर धीमे रेंडर होते हैं, और बहुत से लोगों का मतलब है कि मेरा पूरा अर्थ नहीं है। वेबव्यू सबसे संसाधन गहन घटकों में से एक है जिसका आप उपयोग कर सकते हैं, इसलिए चीजों को सरल रखने के लिए जितना अधिक किया जा सकता है उतना ही बेहतर।
मैं खोज के हफ्तों के बाद दूसरे दिन एक नई लाइब्रेरी में ठोकर खाई जो ठीक वही करता है जो मैं चाहता हूं। ChartJS। कस्टम डेटा पॉइंट्स पास करते समय, वेब व्यू में चार्ट को कार्यान्वित करने का तरीका यहां दिया गया है।
स्वचालित रूप से जेनरेट की गई फ़ाइलों से अलग, इस प्रोजेक्ट में 3 फ़ाइलें हैं
app.js
स्रोत / chart.html
स्रोत / chart.wvjs - इस फ़ाइल में स्थित Chart.js से जावास्क्रिप्ट शामिल है
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({ऊंचाई: 200, चौड़ाई: 320, बाएं: 0, शीर्ष: 0, शोस्क्रॉलबार: झूठी, स्पर्श सक्षम: झूठी, यूआरएल: '/source/chart.html'}); win.add (chartView); var बटन = Ti.UI.create बटन ({शीर्षक: 'पुनर्जन्म', शीर्ष: 220, }); win.add (बटन); बटन .addEventListener ('क्लिक करें', फ़ंक्शन () {var options = {}; options.data = new Array (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 (); हम नई विंडो के साथ ग्राफ को फिर से चलाने के लिए हमारी खिड़की, वेब दृश्य और एक बटन बनाकर शुरू करते हैं। जब बटन क्लिक किया जाता है, तो हम विकल्प नामक ऑब्जेक्ट बनाते हैं। 1 और 1000 के बीच 5 यादृच्छिक संख्याएं उत्पन्न होती हैं और options.data सरणी को असाइन की जाती हैं।
Ti.App.fireEvent को फिर 2 तर्कों के साथ बुलाया जाता है। रेंडर चार्ट पहला आइटम पास हो गया है, और इसका मतलब यह है कि हमारे कोड में कहीं बाहर, हमें एक ही नाम के साथ एक संबंधित ईवेंट श्रोता होना चाहिए। दूसरा आइटम विकल्प वस्तु है। अब, आप खुद से पूछ सकते हैं कि मैंने सीधे सरणी क्यों नहीं पारित की ...... यह काम नहीं करेगा, एक ऑब्जेक्ट की उम्मीद है। ऑब्जेक्ट को सरणी को अटैच करके, हम उस डेटा को ईवेंट श्रोता के माध्यम से पास कर सकते हैं जो हमारी HTML फ़ाइल में स्थित होगा।
वेब व्यू के लिए टाइटेनियम के साथ संवाद करने के लिए, इस तरह के ईवेंट हैंडलर का उपयोग करना आवश्यक है। टाइटेनियम और वेब व्यू को संचार की एक पंक्ति खोलने का एक तरीका चाहिए, और यह वही है जो यह करता है।
विचार / चार्ट. html चार्ट Ti.App.addEventListener (' रेंडर चार्ट', फ़ंक्शन (विकल्प) {Ti.API.info ('प्रतिपादन चार्ट'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {लेबल: ["जन", "फरवरी", "मार्च", "अप्रैल", "मई"], डेटासेट: [{fillcolor: "rgba (220, 220, 220, 0.5)", स्ट्रोक रंग: "आरजीबीए (220, 220, 220, 1)", डेटा: options.data}]} var ctx = document.getElementById ("myChart")। getContext ("2d"); नया चार्ट (ctx) .बार (डेटा);} ); हमारी चार्टिंग लाइब्रेरी का डिफ़ॉल्ट फ़ाइल एक्सटेंशन .js है। मैंने पाया है कि .js एक्सटेंशन का उपयोग करते समय टाइटेनियम के साथ संघर्ष हो सकते हैं, इसलिए सुनिश्चित करें कि आप अपनी जावास्क्रिप्ट फ़ाइलों का नाम बदल दें जिन्हें वेबव्यू से बुलाया जा रहा है। मेरी वरीयता है .wvjs, लेकिन आप वास्तव में जो कुछ भी उपयोग कर सकते हैं।
आप देख सकते हैं कि हमारे पास renderChart के लिए eventListener के भीतर हमारे चार्टिंग जावास्क्रिप्ट कोड है। यह तब निष्पादित किया जाता है जब हमारे टाइटेनियम कोड से फ़ायरवेन्ट निष्पादित किया जाता है। कैनवास के लिए चौड़ाई और ऊंचाई HTML में विशेषताओं को जोड़ने के बजाय जावास्क्रिप्ट से निर्दिष्ट की जाती है, यह कैनवास में मौजूद होने के बारे में बताती है जब हम नए डेटा के साथ एक नया चार्ट पुन: उत्पन्न करते हैं।
