🧕🏿 💃 👩🏻‍🤝‍👨🏾 जावास्क्रिप्ट के साथ चार्ट बनाना 🧘🏼 ⌨️ 👋

एचटीएमएल 5 के आगमन के साथ, ब्राउज़रों में वेब एप्लिकेशन की क्षमताएं कल्पनात्मक रूप से बढ़ी हैं। एक उदाहरण कैनवास तत्व है, जो आपको जावास्क्रिप्ट का उपयोग करके 2 डी और 3 डी मॉडल, साथ ही बिटमैप को खींचने की अनुमति देता है।

इन विशेषताओं के लिए धन्यवाद, सांख्यिकीय रेखांकन सीधे ब्राउज़र में खींचा जा सकता है। रेखांकन के प्रकार भिन्न हो सकते हैं। अतीत में, एक ग्राफ को चित्रित करने के लिए विभिन्न तरीकों का उपयोग किया गया है। यदि ग्राफ़ की उपस्थिति की अनुमति है, तो मानक HTML और सीएसएस का उपयोग किया गया था। हालाँकि, अधिक जटिल ग्राफिक्स के लिए दृष्टिकोणों का उपयोग ब्राउज़रों एचटीएमएल, सीएसएस और जावास्क्रिप्ट में निर्मित विभिन्न तकनीकों में किया गया है। फ्लैश का उपयोग लोकप्रिय था, या क्लाइंट को उनकी छवि के बाद के हस्तांतरण के साथ, सर्वर पर प्लॉट किए गए थे। इन दृष्टिकोणों को समर्थन के लिए बहुत समय की आवश्यकता होती है, अनुप्रयोगों की निरंतरता का उल्लंघन करते हुए, ग्राहक को अतिरिक्त सॉफ़्टवेयर स्थापित करने और अतिरिक्त रूप से सर्वर लोड करने के लिए मजबूर किया जाता है।

कैनवास और जावास्क्रिप्ट का उपयोग करते समय मुख्य दोष ब्राउज़रों द्वारा अलग समर्थन [1] है और पुराने संस्करणों में समर्थन की पूरी कमी है।

शेड्यूल लागू करते समय, आंकड़ों को स्थानांतरित करने का चरण बहुत महत्वपूर्ण है। एक संभावित परिदृश्य सीधे एक जेएस फाइल को सर्वर से प्राप्त करना है जिसमें सांख्यिकी के साथ सरणियाँ हैं। यदि इस डेटा का उपयोग केवल जावास्क्रिप्ट अनुप्रयोगों द्वारा किया जाएगा, तो ऐसा दृष्टिकोण बिल्कुल पर्याप्त होगा।

लेकिन, जब डेटा को किसी विशेष एप्लिकेशन से स्वतंत्रता की आवश्यकता होती है, तो एक अलग दृष्टिकोण का उपयोग किया जाना चाहिए। हमारे मामले में, हम JSON [2] का उपयोग करते हैं। JSON को जावास्क्रिप्ट द्वारा समझना आसान है, और इसका सिंटैक्स एक पूर्ण पार्सर को लागू करना आसान बनाता है।

स्रोत जीतूब

जावास्क्रिप्ट में JSON के लिए एक अंतर्निहित पार्सर है। JSON.parse ECMA-262-5 मानक में शामिल किया गया था, जिसे नवीनतम ब्राउज़रों में लागू किया गया है। ब्राउज़र के पुराने संस्करणों में, आप डगलस क्रॉकफोर्ड से json [3] का उपयोग कर सकते हैं। इस तथ्य के बावजूद कि डगलस क्रॉकफोर्ड से पार्सर ECMA-262-5 में JSON.parse के साथ पूरी तरह से संगत नहीं है, यह eval के प्रत्यक्ष उपयोग के विपरीत काफी विश्वसनीय है।

डेटा संसाधित होने और अनुप्रयोग द्वारा उपयोग के लिए तैयार होने के बाद, एक ग्राफ खींचा जाना चाहिए। इस मामले में, अनुसूची के प्रकार के अनुसार दृष्टिकोण भिन्न होते हैं। हमारे मामले में, हम कॉलम के साथ एक ग्राफ तैयार करेंगे। हम कैनवास के लिए टेक्स्ट एपीआई का उपयोग करेंगे, और ग्राफिक के लिए एक किंवदंती भी बनाएंगे।

हम Google Chrome के लिए WebSitePulse वर्तमान स्थिति एक्सटेंशन में इन चार्ट का उपयोग करते हैं। ऐड-ऑन आपको अपने पसंदीदा ब्राउज़र का उपयोग करते समय अपने सर्वर की निगरानी करने की अनुमति देता है। एक सांख्यिकीय ग्राफ आपको समय की अवधि में स्थिरता दिखाएगा।

आप निम्न सेटिंग्स के साथ WebSitePulse वर्तमान स्थिति की कोशिश कर सकते हैं:

Username: wspdemo
API Key: 35e6340814655582a79039dbc1cb0b65

ब्राउज़र कैनवास समर्थन - caniuse.com/#search=canvas
जावास्क्रिप्ट ऑब्जेक्ट संकेतन - www.json.org
json - github.com/douglascrockford/JSON-js/blob/master/json.js

जावास्क्रिप्ट के साथ चार्ट बनाना

More articles: