अपने यूजर इंटरफेस में चार्ट जोड़ने से आपको कहानियों को आकर्षक तरीके से बताने में मदद मिलती है। लेकिन स्क्रैच से लॉन्ग-फॉर्म कोड लिखे बिना आप इसे कैसे हासिल करते हैं? यह आसान है। अपने डेटा को तैयार प्लॉट में बदलने के लिए आपको बस एक उपयुक्त जावास्क्रिप्ट चार्ट लाइब्रेरी की आवश्यकता है।
चाहे आप रीयल-टाइम चार्ट बनाना चाहते हों या अपने उपयोगकर्ताओं को एक ऐतिहासिक प्रवृत्ति दिखाना चाहते हों, ये सबसे अच्छी JavaScript लाइब्रेरी हैं जिनका आप उपयोग कर सकते हैं।
HTML-आधारित चार्ट बनाने के लिए Chart.js एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है। यह जावास्क्रिप्ट के लिए सबसे सरल विज़ुअलाइज़ेशन पुस्तकालयों में से एक है, और इसमें लाइन, बार, स्कैटर, डोनट, पाई, रडार, क्षेत्र और बबल चार्ट के लिए समर्थन है।
इसकी अनूठी विशेषताओं में से एक चार्ट को चेतन और अनुकूलित करने की क्षमता है जो आपके उपयोगकर्ता इंटरफ़ेस (यूआई) के लिए आपके इच्छित अनुभव के अनुरूप है। चार्ट.जेएस भी एकीकृत करने के लिए बहुत आसान है। चाहे आप वैनिला जावास्क्रिप्ट लिख रहे हों या रिएक्ट या एंगुलर जैसे फ्रंट-एंड स्टैक का उपयोग कर रहे हों, आपको केवल चार्ट.जेएस को पैकेज के रूप में स्थापित करना होगा या सीडीएन से कॉल करना होगा।
सम्बंधित:चार्ट के साथ चार्ट कैसे बनाएं।js
अंततः, यह एक एक्स और वाई सरणी को स्वीकार करता है, और संपूर्ण कोड एक साधारण ऑब्जेक्ट लॉजिक के अंदर चलता है ताकि आपके चार्ट को HTML कैनवास में सामने के अंत में डेटा के आधार पर प्रस्तुत किया जा सके। और आप चाहें तो चार्ट को जोड़ सकते हैं।
यहां रिएक्ट प्रोग्रामर्स के लिए एक आसान जावास्क्रिप्ट चार्ट लाइब्रेरी है। रिएक्ट और डी3.जेएस के संयोजन के साथ निर्मित, रीचार्ट्स मुख्य रूप से रिएक्ट में चार्ट प्रस्तुत करने के लिए स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) का उपयोग करता है। इसलिए, यदि आप वेनिला जावास्क्रिप्ट का उपयोग कर रहे हैं, तो आप अन्य चार्ट लाइब्रेरी विकल्पों पर विचार कर सकते हैं।
पुस्तकालय 11 चार्ट प्रकारों का समर्थन करता है। और स्वयं एक रिएक्ट घटक होने के अलावा, रीचार्ट्स में प्रस्तुत चार्ट का प्रत्येक भाग, जिसमें किंवदंती, कुल्हाड़ी, और बहुत कुछ शामिल है, एक माता-पिता के अंदर एक स्वतंत्र घटक है।
नतीजतन, आप अपनी पसंद के अनुसार प्रॉप्स में हेरफेर करके प्रत्येक घटक को अनुकूलित कर सकते हैं। इसका मतलब है कि आप अन्य रिएक्ट घटकों को प्रभावित किए बिना चार्ट के कुछ हिस्सों को आसानी से प्लग और डिकूप कर सकते हैं।
कैनवासजेएस बहुमुखी, तेज, सरल है, और एचटीएमएल में प्रस्तुत किए गए 30 चार्ट प्रकारों तक की विशेषताएं हैं विभाग एक कैनवास के बजाय। यह एनीमेशन और चार्ट संयोजनों के समर्थन के साथ अत्यधिक अनुकूलन योग्य भी है। इसकी अनूठी विशेषताओं में से एक आपको UI में अपनी चार्ट थीम को गतिशील रूप से बदलने देती है।
जावास्क्रिप्ट फ्रंट-एंड फ्रेमवर्क के अलावा, यह PHP, ASP.NET और MVC स्टैक जैसी सर्वर-साइड तकनीकों में चार्ट रेंडरिंग का समर्थन करता है। यह विभिन्न परिदृश्यों के लिए दस्तावेज़ों में आसान समाधान भी प्रदान करता है।
विभिन्न दृष्टिकोणों से डेटा को देखने के लिए एक डैशबोर्ड उपकरण के रूप में पुस्तकालय एक पेशेवर कोण से भी आता है। कैनवासजेएस के साथ स्टॉक से संबंधित चार्ट तैयार करना आसान है। और अंत में, स्टॉक और सामान्य चार्ट के लिए इसमें अलग-अलग सीडीएन हैं।
यदि आपको वास्तविक चार्ट बनाने से पहले एक एसवीजी बनाने और खरोंच से कुल्हाड़ियों की घोषणा करने में कोई आपत्ति नहीं है, तो आप अपनी वेबसाइट पर ग्राफ़ बनाने के लिए D3.js देखना चाहेंगे। हालांकि यह अन्य जावास्क्रिप्ट चार्ट पुस्तकालयों की तुलना में अधिक क्रियात्मक है, यह आपको चार्ट क्षेत्र और इसकी सामग्री पर बेहतर पकड़ प्रदान करता है।
तथ्य यह है कि यह शक्तिशाली है और अन्य जावास्क्रिप्ट चार्ट पुस्तकालयों की तुलना में निचले स्तर पर संचालित होता है, यह एक आदर्श उपकरण बनाता है जब प्रदर्शन सर्वोच्च लक्ष्य होता है। इसका एपीआई बिल्ट-इन सीएसएस एट्रिब्यूट प्रदान करता है जो आपको अपने चार्ट को अपनी पसंद के अनुसार स्टाइल करने देता है।
और क्योंकि आपका एसवीजी कंटेनर पर नियंत्रण है, आप अपने यूआई डिज़ाइन के अनुरूप ग्राफ़ थीम डिज़ाइन कर सकते हैं। जब आप प्रारंभ करते हैं तो D3.js तकनीकी हो सकता है। अंततः, एक बार जब आप इसके चारों ओर अपना रास्ता जान लेते हैं, तो आप इसके साथ लगभग किसी भी प्रकार के चार्ट को प्लॉट कर सकते हैं।
दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में कस्टम ग्राफ़ लिखने के लिए Google चार्ट HTML5 और SVG का उपयोग करता है। इसका उपयोग करना आसान है और इसके प्रलेखन में पर्याप्त उदाहरण प्रदान करता है कि आप रास्ते में खोया हुआ महसूस नहीं करेंगे। यह चार्ट टूल प्रोटोकॉल का समर्थन करने वाले विभिन्न डेटा स्रोतों से जुड़ने का एक अवसर भी प्रदान करता है।
सम्बंधित:आसानी से त्वरित वेबसाइट बनाने के लिए नि:शुल्क HTML टेम्पलेट
यह एक डेटाटेबल क्लास प्रदान करता है जो आपके डेटा को कॉलम और पंक्तियों के अलग-अलग सरणियों में विभाजित, फ़िल्टर और संशोधित करना आसान बनाता है। चार्ट को कोड करते समय पुस्तकालय अतिरिक्त गणना की आवश्यकता को भी हटा देता है। उदाहरण के लिए, पाई चार्ट बनाते समय आपको अपने डेटा के प्रतिशत वितरण की गणना करने की आवश्यकता नहीं है। यह आपके लिए करता है।
Google चार्ट में प्रत्येक चार्ट प्रकार एक JavaScript वर्ग के रूप में आता है, और आप चरों को अलग करने के लिए डेटा ऑब्जेक्ट और अनुकूलन विकल्पों को आसानी से असाइन कर सकते हैं। इसलिए, यह आपको उन्हें मुख्य चार्ट वर्ग में अलग से पास करने देता है। दरअसल, इसका तर्क साफ और व्यापक है।
ApexCharts.js एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है, जो UI के लिए रिस्पॉन्सिव चार्ट्स को रेंडर करती है। आप इसे उपयोग करने के लिए अनुकूल पाएंगे, विशेष रूप से इसके व्यापक दस्तावेज़ीकरण के साथ।
ApexCharts.js ने अनुकूलन विकल्पों की विशेषता के लिए अपनी प्रतिष्ठा अर्जित की है जो आपको अतिरिक्त स्टाइल की चिंता किए बिना विभिन्न स्क्रीन आकारों के अनुकूल होने के लिए अपने चार्ट को बदलने की सुविधा देता है। यह दिन-प्रतिदिन के विज़ुअलाइज़ेशन में उपयोग किए जाने वाले कई चार्ट प्रकारों का भी समर्थन करता है।
यह लाइब्रेरी कई चार्ट के साथ भी अच्छी तरह से काम करती है। एक ही ग्रिड में विभिन्न चार्ट प्रकारों का संयोजन इसके मजबूत बिंदुओं में से एक है।
Chartist.js एक ओपन-सोर्स प्रोजेक्ट है जो अन्य JavaScript चार्ट लाइब्रेरी में अपने योगदान देने वाले समुदाय के असंतोष से उत्पन्न होता है। यह DOM को चार्ट बनाने, स्टाइल करने, कॉन्फ़िगर करने और अंत में रेंडर करने के लिए इनलाइन SVG, CSS और JavaScript के संयोजन का उपयोग करता है।
इस चार्टिंग लाइब्रेरी में विभिन्न प्रकार के चार्ट भी हैं जो कई अन्य पुस्तकालय प्रदान करते हैं। Chartists.js CSS एनिमेशन और प्रतिक्रियात्मकता के लिए सशक्त समर्थन प्रदान करता है। इसलिए, इसका चार्ट आउटपुट स्क्रीन आकार के आधार पर गतिशील रूप से अनुकूलित होता है।
हालांकि एनीमेशन प्रभाव अद्वितीय हैं, इस पुस्तकालय के साथ काम करना शुरुआती लोगों के लिए मुश्किल हो सकता है। फिर भी, आप दस्तावेज़ीकरण में व्यापक और संपादन योग्य उदाहरण पाएंगे जो किसी भी अनुकूलन या एनिमेशन के लिए उपयोगी है जिसे आप जोड़ना चाहते हैं।
चाहे आप फ्रंट-एंड जावास्क्रिप्ट स्टैक, टाइपस्क्रिप्ट, या सादे जावास्क्रिप्ट के साथ काम कर रहे हों, बिलबोर्ड.जेएस सरल और उपयोग करने योग्य है। यह एक D3 v4-आधारित JavaScript चार्ट लाइब्रेरी है।
पुस्तकालय 21 चार्ट प्रकारों का समर्थन करता है और अपने एपीआई डॉक्स में उनमें से प्रत्येक के लिए व्यापक उदाहरण पेश करता है। यह आपके UI में विज़ुअलाइज़ेशन को जल्दी से क्राफ्ट करने के लिए सीखना आसान और भरोसेमंद बनाता है।
सम्बंधित:सीखने लायक जावास्क्रिप्ट फ्रेमवर्क
बिलबोर्ड.जेएस के साथ चार्ट बनाने के लिए आवश्यक सभी कोड एक ऑब्जेक्ट लेयर में होते हैं, और डेटा प्रविष्टि आसान होती है क्योंकि आप जितने चाहें उतने ग्राफ़ बनाने के लिए डेटा को अलग-अलग सरणियों में विभाजित कर सकते हैं।
जावास्क्रिप्ट के साथ अपनी वेबसाइट पर कहानियां सुनाएं
ओपन-सोर्स टूल आज के दिन और उम्र में प्रोग्रामिंग को त्वरित और आसान बनाते हैं। चार्ट प्रस्तुति आपके प्रोजेक्ट के चरणों में से एक है जहां आप इनमें से किसी भी मौजूदा जावास्क्रिप्ट चार्ट लाइब्रेरी का उपयोग करके पर्याप्त समय बचा सकते हैं।
इसके अलावा, आपके पास अतिरिक्त स्क्रिप्ट लिखने के लिए अपना सिर लपेटे बिना आपके ऐप को अधिक मॉड्यूलर और हल्का बनाने का अतिरिक्त लाभ है।
जावास्क्रिप्ट ढांचे के साथ चार्ट प्लॉट करना वेब की भाषा के लिए हिमशैल का सिरा है। वहाँ अनगिनत परियोजनाएं हैं जो बनने की प्रतीक्षा कर रही हैं। हैप्पी हैकिंग!
जावास्क्रिप्ट सीखने के लिए एक महत्वपूर्ण प्रोग्रामिंग भाषा है। यदि आप इसके लिए नए हैं, तो आपके ज्ञान को बढ़ाने में आपकी मदद करने के लिए यहां कुछ प्रोजेक्ट दिए गए हैं।
आगे पढ़िए
- प्रोग्रामिंग
- जावास्क्रिप्ट
- वेब विकास
- प्रोग्रामिंग
Idowu कुछ भी स्मार्ट तकनीक और उत्पादकता के बारे में भावुक है। अपने खाली समय में, वह कोडिंग के साथ खेलता है और जब वह ऊब जाता है तो शतरंज की बिसात पर चला जाता है, लेकिन वह कभी-कभार दिनचर्या से अलग होना भी पसंद करता है। लोगों को आधुनिक तकनीक के बारे में बताने का उनका जुनून उन्हें और अधिक लिखने के लिए प्रेरित करता है।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें
