रेखांकन और चार्ट पर डेटा की कल्पना के लिए 10 सर्वश्रेष्ठ जावास्क्रिप्ट पुस्तकालय

रेखांकन के बारे में कुछ जादुई है। वक्र वक्र तुरंत पूरी स्थिति को प्रकट करता है - महामारी के विकास का इतिहास, आतंक या समृद्धि की अवधि। यह पंक्ति प्रबुद्ध करती है, कल्पना को जगाती है, आश्वस्त करती है।
- हेनरी। डी। हबर्ड

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

यह संभावना नहीं है कि कोई भी इस बात से इनकार करेगा कि आधुनिक एचटीएमएल 5 वेब में, जावास्क्रिप्ट डेटा को विज़ुअलाइज़ करने के लिए सबसे सार्वभौमिक और सरल तकनीक है। इसलिए, यदि आप फ्रंट-एंड डेवलपमेंट में लगे हुए हैं, तो आप सबसे अधिक संभावना या तो जेएस चार्ट के निर्माण से पहले ही निपट चुके हैं, या आप इस (जल्द) भविष्य में इसका सामना करेंगे।

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



ठीक है, चलो शुरू करें: यहां डेटा विज़ुअलाइज़ेशन के लिए सर्वश्रेष्ठ जेएस लाइब्रेरी हैं!

amCharts

amCharts उन जावास्क्रिप्ट पुस्तकालयों में से एक है जो डेटा विज़ुअलाइज़ेशन के लिए एक सरल और एक ही समय में लचीले समाधान की तलाश में उपयोगी हैं।

मुख्य विशेषताएं

• इंटरेक्टिव मानचित्र और गैंट चार्ट सहित कई विभिन्न प्रकार के ग्राफ़।
• डेटा का गहराई से विश्लेषण करने की क्षमता (ड्रिलडाउन) और अन्य अच्छी तरह से डिज़ाइन किए गए इंटरैक्टिव विकल्प।
• सभी आवश्यक विधियों का वर्णन करने वाला दस्तावेज अच्छी तरह से लिखा गया है, हालांकि मेरे स्वाद के लिए, यह उपयोग करने के लिए बहुत सुविधाजनक नहीं है।
• ग्राफ का शांत एनीमेशन।
• रिएक्ट, कोणीय, स्वर, एम्बर, आदि के साथ एकीकरण।
• वर्डप्रेस के लिए तैयार प्लगइन।
• एक छवि या पीडीएफ फाइल को चार्ट निर्यात करें।
• लाइव ग्राफिक्स, पूर्ण अनुकूलन, W3C मानकों के अनुसार विशेष सुविधाएँ।
• सभी उपयोगकर्ताओं के लिए पूर्ण तकनीकी सहायता और लाइसेंस वाले ग्राहकों के लिए प्राथमिकता।
• ग्राहक: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT & T, आदि।

की लागत

मुक्त संस्करण में संदर्भ के साथ ब्रांडिंग। ब्रांडिंग को हटाने के लिए, आपको एक भुगतान लाइसेंस ($ 180 से) खरीदने की ज़रूरत है, साथ ही प्राथमिकता समर्थन तक पहुंच प्रदान की गई है।

अधिक जानें amCharts के बारे में

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

AnyChart

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

मुख्य विशेषताएं

• 80 से अधिक प्रकार के ग्राफ, जिनमें पारंपरिक चार्ट, स्टॉक चार्ट, जियोविज़ुअललाइज़ेशन (मैप्स), साथ ही गैंट चार्ट और पीईआरटी नेटवर्क चार्ट शामिल हैं।
• डेटा लोड करने के कई विकल्प हैं: XML, JSON, CSV, JS API, Google शीट्स, HTML टेबल।
• चार्ट पर डेटा (ड्रिलडाउन) में "सीमांकित" करने की क्षमता।
• तकनीकी विश्लेषण और एनोटेशन (ड्राइंग टूल) "बॉक्स से बाहर" के लिए तकनीकी संकेतक।
• व्यापक प्रलेखन और एपीआई का वर्णन, उत्तरदायी समर्थन।
• Qlik में एप्लिकेशन और डैशबोर्ड के डेवलपर्स के लिए Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS आदि के साथ एकीकरण, Qlik Sense के लिए एक विशेष तैयार-निर्मित एक्सटेंशन है।
• ग्राफ, चार्ट, डैशबोर्ड के बहुत सारे तैयार उदाहरणों के साथ-साथ अपने स्वयं के विशेष सैंडबॉक्स को स्वत: पूर्ण कोड के साथ।
• पुराने ब्राउज़रों के लिए समर्थन।
• पीडीएफ रिपोर्ट सहित विभिन्न प्रारूपों में निर्यात डेटा; Jpg, png, svg image; एक्सेल (XLSX) या ग्राफ के साथ CSV डेटा फाइलें।
• ग्राहक: Oracle, Microsoft, Citi, Samsung, Nokia, AT & T, Ford, वोक्सवैगन, लॉकहीड मार्टिन इत्यादि।

की लागत

वॉटरमार्क संस्करण मुफ़्त है। ब्रांडिंग से छुटकारा पाने और वाणिज्यिक परियोजनाओं में AnyChart का उपयोग करने का अवसर प्राप्त करने के लिए, आपको लाइसेंस ($ 49 से) खरीदने की आवश्यकता है।

AnyChart के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

Chart.js

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

मुख्य विशेषताएं

• 8 प्रकार के ग्राफ़ और चार्ट: रैखिक (रेखा), क्षेत्रों (क्षेत्र), शासित (बार), परिपत्र (पाई), पंखुड़ी "रडार" (रडार), ध्रुवीय (ध्रुवीय), बुलबुला (बुलबुला) और स्कैटर प्लॉट () के साथ रैखिक स्कैटर)।
• सभी प्रकार के ग्राफ़ को एनीमेशन के साथ अनुकूलित और प्रदान किया जा सकता है, और ये सभी नेटवर्क पर काम करते समय अनुकूल होते हैं।
• प्लगइन्स के उपयोग के माध्यम से कार्यक्षमता को बढ़ाया जा सकता है।
• अच्छा प्रलेखन।
• स्टैक ओवरफ्लो के माध्यम से समर्थन।
• IE9 + ब्राउज़र के लिए समर्थन।

की लागत

मुक्त खुला स्रोत पुस्तकालय। एमआईटी लाइसेंस के तहत प्रकाशित।

Chart.js के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

Chartist.js

Chartist.js एक सरल ओपन सोर्स JS लाइब्रेरी है जिसका उपयोग स्वच्छ अनुकूली रेखांकन और चार्ट बनाने के लिए भी किया जा सकता है। सामान्यतया, यह उन लोगों के लिए अच्छी तरह से अनुकूल है, जिन्हें केवल प्रारंभिक लाइन, बार या पाई चार्ट की आवश्यकता होती है और डेटा विज़ुअलाइज़ेशन के मामले में बहुत अधिक की आवश्यकता नहीं होती है। अच्छी उपस्थिति, और सभी प्रकार की सुविधाओं की एक बड़ी संख्या की आवश्यकता नहीं है।

मुख्य विशेषताएं

• केवल 3 प्रकार के चार्ट: लाइन, बार, पाई।
• महान एनीमेशन।
• एपीआई प्रलेखन में सभी आवश्यक जानकारी होती है, लेकिन इसका उपयोग करना बहुत सुविधाजनक नहीं है (बहुत स्क्रॉल करने के लिए तैयार हो जाओ)।
• कार्यक्षमता का विस्तार करने के लिए प्लगइन्स के उपयोग की अनुमति देता है।
• यह ग्राफ खींचने के लिए SVG का उपयोग करता है।
• पुराने ब्राउज़रों के लिए समर्थन।

की लागत

ओपन-सोर्स, किसी भी उद्देश्य के लिए मुफ्त उपयोग।

Chartist.js के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

D3.js

D3.js एक शक्तिशाली ओपन सोर्स जावास्क्रिप्ट डेटा विज़ुअलाइज़ेशन लाइब्रेरी है। GitHub पर उनके 20 हजार से अधिक कांटे हैं। इसके मूल में, डी 3 लाइब्रेरी की तुलना में एक रूपरेखा की तरह अधिक है। उसके साथ काम करना इतना आसान नहीं है, खासकर पहली बार में। लेकिन डी 3 पर कई उपयोगी सूचना संसाधन हैं। और अंत में, इस पुस्तकालय की मदद से आप अद्भुत मूल विज़ुअलाइज़ेशन और किसी भी ग्राफिक्स को खरोंच से बना सकते हैं, जो डी 3 को वास्तव में सार्थक उपकरण बनाता है।

मुख्य विशेषताएं

• यह कई प्रकार के रेखांकन का समर्थन करता है, अन्य जावास्क्रिप्ट पुस्तकालयों के विशाल बहुमत से बहुत अधिक (उदाहरण के लिए, वोरोनोई आरेख)।
• गुरु को समय लगता है। सूची के कुछ व्यावसायिक पुस्तकालयों की तुलना में कम स्पष्ट और स्पष्ट (उदाहरण के लिए AnyChart)। ट्यूटोरियल की एक बड़ी संख्या और एक बहुत अच्छा एपीआई द्वारा मुआवजा।
• DOM को मैनिपुलेट करने के लिए डेटा-आधारित दृष्टिकोण के साथ शक्तिशाली विज़ुअलाइज़ेशन घटकों को जोड़ती है।
• ब्राउज़र टूल से आसानी से डिबग करें।
• बहुत सारे उदाहरण।
• वक्र पीढ़ी कार्य।
• खींचें और ड्रॉप GUI।

की लागत

डी 3 ग्राफ़ और चार्ट बनाने के लिए एक ओपन-सोर्स लाइब्रेरी है, जो किसी भी उद्देश्य के लिए उपयोग के लिए बिल्कुल मुफ्त है।

D3.js के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

FusionCharts

FusionCharts इंटरएक्टिव ग्राफ़ और चार्ट बनाने के लिए एक और अच्छा पुस्तकालय है, जिसमें सैकड़ों तैयार उदाहरण हैं। FusionCharts चार्ट JSON और XML डेटा दोनों का समर्थन करते हैं। प्रतिपादन - एचटीएमएल 5 / एसवीजी और वीएमएल के माध्यम से।

मुख्य विशेषताएं

• दर्जनों चार्ट, 2 डी और 3 डी, और सभी महाद्वीपों को कवर करने वाले 950 से अधिक मानचित्र।
• एनिमेटेड और पूरी तरह से इंटरैक्टिव ग्राफिक्स और नक्शे।
• ASP.NET, PHP, रूबी ऑन रेल्स के लिए सर्वर एपीआई।
• JQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, आदि के साथ संगत।
• एक काफी विस्तृत उपयोगकर्ता गाइड और एपीआई का वर्णन।
• चार्ट और डैशबोर्ड के कई उदाहरण।
• पुराने ब्राउज़रों के लिए समर्थन।
• PNG, JPG और PDF को निर्यात करें।
• समर्थन - ज्ञान आधार और सामुदायिक मंच के माध्यम से।
• लाइसेंस खरीदने वाले उपयोगकर्ताओं के लिए असीमित प्राथमिकता समर्थन।
• ग्राहक: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe, आदि।

की लागत

गैर-व्यावसायिक उपयोग के लिए नि: शुल्क। वाणिज्यिक उपयोग के लिए भुगतान लाइसेंस ($ 497 से)।

FusionCharts के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

गूगल चार्ट

Google चार्ट उन परियोजनाओं के लिए एक उत्कृष्ट पसंद है, जिनमें चार्ट की सादगी और स्थिरता जटिल, विस्तृत अनुकूलन सेटिंग्स के लिए बेहतर है।

मुख्य विशेषताएं

• HTML5 / SVG और VML में ग्राफिक्स रेंडरिंग।
• रेखांकन, चार्ट, डैशबोर्ड के कई उदाहरण।
• सभी रेखांकन संवादात्मक हैं, कुछ ज़ूम और पैन भी हो सकते हैं।
• पूर्ण प्रलेखन।
• पुराने ब्राउज़रों के लिए समर्थन।
• FAQ, GitHub और फ़ोरम के माध्यम से समर्थन।

की लागत

नि: शुल्क लाइसेंस, लेकिन स्रोत कोड खुला नहीं है। यह आपको अपने सर्वर पर Google JS फ़ाइलों की मेजबानी करने की अनुमति नहीं देता है, इसलिए यदि आप संवेदनशील डेटा के साथ काम करते हैं तो यह आपके लिए उपयुक्त नहीं हो सकता है।

Google चार्ट के बारे में और जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

Highcharts

एचवी 5 में ग्राफ और चार्ट बनाने के लिए एसवीजी (वीएमएल) में प्रतिपादन के साथ हाईचर्स सबसे बहुमुखी और लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में से एक है। यह हल्का है, विभिन्न प्रकार के विज़ुअलाइज़ेशन की एक विस्तृत चयन का समर्थन करता है और उच्च प्रदर्शन प्रदान करता है।

मुख्य विशेषताएं

• शुद्ध जावास्क्रिप्ट का उपयोग करता है। डेटा बाहरी रूप से डाउनलोड किया जा सकता है।
• योग्य दस्तावेज और वर्णन एपीआई प्रलेखन, उपयोगकर्ता मामलों।
• अन्तरक्रियाशीलता, जिसमें ड्रिलडाउन ("गहराई में डेटा का विश्लेषण करने की क्षमता") शामिल है।
• प्रतिक्रिया, कोणीय, उल्का, .NET, iOS, आदि के साथ प्रयोग किया जा सकता है।
• पीएनजी, जेपीजी, पीडीएफ और एसवीजी प्रारूपों को निर्यात करें।
• मंच और स्टैक ओवरफ्लो के माध्यम से मुफ्त संस्करण के उपयोगकर्ताओं के लिए समर्थन। प्रीमियम ईमेल और स्काइप समर्थन केवल उन वाणिज्यिक उपयोगकर्ताओं के लिए उपलब्ध है, जिनके पास उपयुक्त लाइसेंस है।
• ग्राहक: वीजा, याहू!, फेसबुक, ट्विटर, ग्रुपन, नोकिया, एरिक्सन, मास्टरकार्ड, यांडेक्स, आदि।

की लागत

गैर-व्यावसायिक उपयोग के लिए नि: शुल्क। व्यावसायिक उपयोग के लिए, आपको एक लाइसेंस ($ 50 से) खरीदना होगा।

Highcharts के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

Plotly.js

Plotly.js एक उच्च-स्तरीय, मुक्त, मुक्त स्रोत जावास्क्रिप्ट लाइब्रेरी है। D3.js और WebGL पर निर्मित। इसका उपयोग कई विभिन्न प्रकार के डेटा विज़ुअलाइज़ेशन बनाने के लिए किया जा सकता है, उदाहरण के लिए, तीन-आयामी सांख्यिकीय रेखांकन।

मुख्य विशेषताएं

• 20 प्रकार के ग्राफ़ और चार्ट जिन्हें साइट पर एम्बेड किया जा सकता है या गतिशील प्रस्तुतियों को बनाने के लिए उपयोग किया जा सकता है।
• इसका उपयोग पायथन, आर, MATLAB के लिए एक ब्राउज़र-आधारित चार्टिंग लाइब्रेरी के रूप में किया जाता है, एक घोषणा JSON संरचना में रेखांकन को सार करता है।
• व्यापक एपीआई प्रलेखन।
• अच्छा एनीमेशन।
• प्रतिक्रिया का उपयोग करता है।
• पीएनजी और जेपीजी को निर्यात चार्ट। ईपीएस, एसवीजी और पीडीएफ को निर्यात सदस्यता द्वारा उपलब्ध है।
• कई तैयार उदाहरण।
• यह एक्सेल स्प्रेडशीट के साथ या सीधे अपने डेटाबेस के साथ काम कर सकता है।
• समर्थन मंच।

की लागत

मुक्त खुला स्रोत पुस्तकालय।

Plotly.js के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

ZingChart

ZingChart इंटरैक्टिव और अनुकूली चार्ट बनाने के लिए एक उपयोगी उपकरण है। यह एक तेज़ और लचीली लाइब्रेरी है जो बड़े डेटा के साथ काम करना और बड़ी मात्रा में डेटा के साथ ग्राफ़ उत्पन्न करना काफी आसान बनाता है।

मुख्य विशेषताएं

• 30 से अधिक प्रकार के ग्राफ़ और चार्ट का समर्थन करता है।
• पूरी तरह से अनुकूलन, डिजाइन सेटिंग्स के साथ एक ला सीएसएस।
• JQuery, Angular, Node.js, PHP, आदि के साथ संगत।
• वास्तविक समय में डेटा के साथ काम करें, किसी भी आकार के डेटा सेट का तेजी से प्रतिपादन।
• डेटा को JS ऑब्जेक्ट्स, JSON, CSV, PHP, AJAX, MySQL के माध्यम से लोड किया जा सकता है।
• विस्तृत और काफी पठनीय एपीआई प्रलेखन।
• ZingChart सहायता केंद्र, स्टैक ओवरफ्लो, ईमेल और चैट के माध्यम से मुफ्त और प्रीमियम सहायता।
• ग्राहक: Microsoft, बोइंग, एडोब, एप्पल, सिस्को, गूगल, अल्काटेल, आदि।

की लागत

ब्रांडेड लाइसेंस मुफ्त में ZingChart लाइब्रेरी तक पूरी पहुँच प्रदान करता है। व्यावसायिक उपयोग के लिए, एक भुगतान लाइसेंस की आवश्यकता होती है ($ 199 से)।

ZingChart के बारे में अधिक जानें

• आधिकारिक वेबसाइट
• प्रलेखन
• लाइब्रेरी डाउनलोड करें

निष्कर्ष

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

बेशक, कुछ विशेषताएं हैं, विशेषताएं जो एक पुस्तकालय को तेजी से बनाती हैं, या डिजाइन के मामले में पहले से बेहतर हैं, या दूसरों की तुलना में अधिक लचीली हैं। लेकिन, अंत में, यह इतना महत्वपूर्ण नहीं है कि कौन से पुस्तकालय सूची में हैं, क्योंकि अंत में सबसे अच्छा वह है जो एक कार्य के हिस्से के रूप में पूरी तरह से आपकी विशिष्ट आवश्यकताओं को पूरा करता है।

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

यदि आपको इंटरेक्टिव मानचित्रों पर डेटा की कल्पना करने की आवश्यकता है, जहां भौगोलिक रुझान, रिश्ते, रिश्ते, प्रवाह आदि सर्वोपरि हैं, तो नक्शे के रूप में भू-विज़ुअलाइज़ेशन डेटा के लिए सर्वश्रेष्ठ जावास्क्रिप्ट पुस्तकालयों पर मेरे पिछले लेख को पढ़ें (हैबे पर रूसी में अनुवाद है ) ।

एक अच्छा दिन है और जावास्क्रिप्ट का उपयोग कर डेटा के दृश्य का आनंद लें!

---

यह हर डेटा विज़ुअलाइज़ेशन की आवश्यकता के लिए शीर्ष जावास्क्रिप्ट चार्टिंग लाइब्रेरी का मेरा अनुवाद है जो मैंने पहले हैकर दोपहर पर प्रकाशित किया था।