15 JavaScript Libraries for Creating Beautiful Charts

ग्राफ़ और चार्ट के बिना किसी भी डैशबोर्ड की कल्पना करना व्यावहारिक रूप से असंभव है। वे जटिल आँकड़े जल्दी और प्रभावी ढंग से प्रस्तुत करते हैं। इसके अतिरिक्त, एक अच्छा ग्राफ़ आपकी वेबसाइट के समग्र डिज़ाइन को भी बढ़ाता है।

इस लेख में, मैं आपको ग्राफ़ और चार्ट के लिए कुछ बेहतरीन JavaScript लाइब्रेरी दिखाऊंगा। ये पुस्तकालय आपकी भविष्य की परियोजनाओं के लिए सुंदर और अनुकूलन योग्य चार्ट बनाने में आपकी सहायता करेंगे।

जबकि अधिकांश पुस्तकालय स्वतंत्र और मुक्त स्रोत हैं, उनमें से कुछ अतिरिक्त सुविधाओं के साथ एक भुगतान संस्करण प्रदान करते हैं।

हमारे शीर्ष जेएस चार्टिंग पुस्तकालय:

  • डी3.जेएस – लोकप्रिय, अच्छी तरह से समर्थित लेकिन एक कठिन सीखने की अवस्था।
  • प्लॉट.ly – वैज्ञानिक चार्टिंग के लिए बढ़िया। D3.js से निर्मित।
  • चार्ट.जेएस – सरल और सुरुचिपूर्ण

अन्य उल्लेखनीय उल्लेख:

D3.js — डेटा-संचालित दस्तावेज़

जब हम आज चार्टिंग के बारे में सोचते हैं, डी3.जेएस पहला नाम आता है। एक ओपन सोर्स प्रोजेक्ट होने के नाते, D3.js निश्चित रूप से कई शक्तिशाली सुविधाएँ लाता है जो अधिकांश मौजूदा पुस्तकालयों में गायब थीं। विशेषताएं जैसे गतिशील गुण, दर्ज करें और बाहर निकलें, शक्तिशाली संक्रमण, और jQuery के साथ सिंटैक्स परिचितता इसे चार्टिंग के लिए सर्वश्रेष्ठ जावास्क्रिप्ट पुस्तकालयों में से एक बनाती है। D3.js में चार्ट HTML, SVG और CSS के माध्यम से प्रस्तुत किए जाते हैं।

कई अन्य जावास्क्रिप्ट पुस्तकालयों के विपरीत, D3.js बॉक्स से बाहर किसी भी पूर्व-निर्मित चार्ट के साथ शिप नहीं करता है। हालाँकि, आप की सूची देख सकते हैं D3.js . के साथ निर्मित रेखांकन एक सिंहावलोकन प्राप्त करने के लिए। जैसा कि आप देख सकते हैं, D3.js विभिन्न प्रकार के चार्ट प्रकारों का समर्थन करता है।

शुरुआती लोगों के लिए एक खामी इसकी तीव्र सीखने की अवस्था हो सकती है, लेकिन कई हैं ट्यूटोरियल तथा साधन आपको आरंभ करने के लिए।

D3.js IE8 जैसे पुराने ब्राउज़र के साथ ठीक से काम नहीं करता (लेकिन कौन करता है?) लेकिन आप हमेशा जैसे प्लगइन्स का उपयोग कर सकते हैं आठ प्लगइन क्रॉस-ब्राउज़र संगतता के लिए।

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

प्लॉटली.जेएस

प्लॉटलीज - जावास्क्रिप्ट चार्ट लाइब्रेरी

प्लॉटली.जेएस वेब के लिए पहली वैज्ञानिक जावास्क्रिप्ट चार्टिंग लाइब्रेरी है। यह 2015 से खुला स्रोत है, जिसका अर्थ है कि कोई भी इसे मुफ्त में उपयोग कर सकता है। Plotly.js 20 चार्ट प्रकारों का समर्थन करता है, जिसमें SVG मानचित्र, 3D चार्ट और सांख्यिकीय ग्राफ़ शामिल हैं। यह D3.js के शीर्ष पर बनाया गया है और स्टैक.ग्ल.

गूगल चार्ट

Google चार्ट - जावास्क्रिप्ट चार्ट पुस्तकालय

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

Google चार्ट विभिन्न अनुकूलन विकल्पों के साथ आता है जो ग्राफ़ के रूप को बदलने में मदद करते हैं। आईफ़ोन, आईपैड और एंड्रॉइड को क्रॉस-ब्राउज़र संगतता और क्रॉस-प्लेटफ़ॉर्म पोर्टेबिलिटी प्रदान करने के लिए HTML5/SVG का उपयोग करके चार्ट प्रदान किए जाते हैं। इसमें पुराने IE संस्करणों का समर्थन करने के लिए VML भी शामिल है।

यहाँ एक महान है Google चार्ट का उपयोग करके निर्मित उदाहरणों की सूची.

चार्टजेएस

चार्ट.जेएस - जावास्क्रिप्ट चार्ट पुस्तकालय

चार्टजेएस चार्ट के लिए सुंदर फ्लैट डिजाइन प्रदान करता है। यह सभी आधुनिक ब्राउज़रों (IE11+) को प्रस्तुत करने और समर्थन करने के लिए HTML5 कैनवास तत्व का उपयोग करता है।

चार्टजेएस चार्ट डिफ़ॉल्ट रूप से उत्तरदायी होते हैं। वे मोबाइल और टैबलेट पर अच्छा काम करते हैं। आउट ऑफ द बॉक्स (लाइन, बार, रडार, डोनट और पाई, पोलर एरिया, बबल, स्कैटर, एरिया) के 8 अलग-अलग प्रकार के चार्ट हैं, साथ ही उन्हें मिलाने की क्षमता भी है। सभी चार्ट एनिमेटेड और अनुकूलन योग्य हैं।

यहां है चार्टजेएस के साथ निर्मित उदाहरणों की क्यूरेटेड सूची.

चार्टिस्ट.जेएस

चार्टिस्ट - जावास्क्रिप्ट चार्ट लाइब्रेरी

चार्टिस्ट.जेएस सुंदर उत्तरदायी चार्ट प्रदान करता है। चार्टजेएस की तरह, चार्टिस्ट.जेएस एक ऐसे समुदाय का उत्पाद है जो अत्यधिक मूल्य वाली जावास्क्रिप्ट चार्टिंग लाइब्रेरी का उपयोग करके निराश था। यह चार्ट को रेंडर करने के लिए SVG का उपयोग करता है। इसे CSS3 मीडिया क्वेरीज़ और Sass के माध्यम से नियंत्रित और अनुकूलित किया जा सकता है। साथ ही, ध्यान दें कि Chartist.js शानदार एनिमेशन प्रदान करता है जो केवल आधुनिक ब्राउज़र में काम करेगा।

आप विभिन्न प्रकार के चार्ट के साथ एक्सप्लोर कर सकते हैं और खेल सकते हैं चार्टिस्ट.जेएस उदाहरण पृष्ठ. चार्ट इंटरैक्टिव हैं और आप उन्हें तुरंत संपादित कर सकते हैं।

रीचार्ट्स

रीचार्ट्स - जावास्क्रिप्ट चार्ट लाइब्रेरी

रीचार्ट्स डिकूप्ड, पुन: प्रयोज्य रिएक्ट घटकों के साथ चार्ट बनाने के लिए एक कंपोजेबल चार्टिंग लाइब्रेरी है। यह SVG तत्वों और D3.js के शीर्ष पर बनाया गया है। इसकी जाँच पड़ताल करो उदाहरणों की सूची.

n3-चार्ट

n3charts - जावास्क्रिप्ट चार्ट पुस्तकालय

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

इसकी जांच करो n3-चार्ट का उपयोग करके निर्मित चार्ट की सूची.

ज़िंग चार्ट

ज़िंगचार्ट - जावास्क्रिप्ट चार्ट लाइब्रेरी

ज़िंग चार्ट जल्दी से चार्ट बनाने के लिए एक लचीला, इंटरैक्टिव, तेज, स्केलेबल और आधुनिक उत्पाद प्रदान करता है। उनके उत्पाद का उपयोग Apple, Microsoft, Adobe, बोइंग और सिस्को जैसी कंपनियों द्वारा किया जाता है, और अजाक्स, JSON, HTML5 का उपयोग करके शानदार दिखने वाले चार्ट जल्दी से वितरित किए जाते हैं।

ZingChart 35 से अधिक प्रतिक्रियाशील चार्ट प्रकार और मॉड्यूल प्रदान करता है, जो वास्तविक समय में डेटा भी दिखा सकते हैं। उन्हें सीएसएस द्वारा स्टाइल और थीम दिया जा सकता है और बड़े डेटा को तेजी से प्रस्तुत कर सकते हैं।

आप उनकी जांच कर सकते हैं उदाहरणों का समृद्ध सेट.

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

हाईचार्ट्स

हाईचार्ट्स - जावास्क्रिप्ट चार्ट लाइब्रेरी

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

Highcharts का उपयोग करने के सबसे बड़े लाभों में से एक पुराने ब्राउज़र के साथ संगतता है – यहां तक ​​कि Internet Explorer 6 पर भी वापस जाना। मानक ब्राउज़र ग्राफिक्स रेंडरिंग के लिए SVG का उपयोग करते हैं। लीगेसी इंटरनेट एक्सप्लोरर में, वीएमएल का उपयोग करके ग्राफिक्स तैयार किए जाते हैं।

सबसे लोकप्रिय भाषाओं (.NET, PHP, Python, R, और Java) और फ्रेमवर्क (Angular, Vue और React), और iOS और Android के लिए रैपर हैं।

जबकि हाईचार्ट व्यक्तिगत उपयोग के लिए मुफ़्त है, आपको व्यावसायिक उपयोग के लिए लाइसेंस खरीदना होगा।

फ्यूजन चार्ट

फ़्यूज़नचार्ट - जावास्क्रिप्ट चार्ट लाइब्रेरी

फ्यूजन चार्ट सबसे पुरानी जावास्क्रिप्ट चार्टिंग लाइब्रेरी में से एक है, जिसे 2002 में जारी किया गया था। 100+ से अधिक चार्ट और 1400+ मानचित्रों के साथ, यह कहना आसान है कि फ़्यूज़न चार्ट्स सबसे व्यापक जावास्क्रिप्ट चार्टिंग लाइब्रेरी है। यह सभी लोकप्रिय जावास्क्रिप्ट ढांचे और सर्वर-साइड प्रोग्रामिंग भाषाओं के साथ एकीकरण प्रदान करता है। बेहतर सुवाह्यता और पुराने ब्राउज़र के साथ संगतता के लिए HTML5/SVG और VML का उपयोग करके चार्ट प्रदान किए जाते हैं – यहां तक ​​कि Internet Explorer 6 पर भी वापस जाएं। इस पश्चगामी संगतता ने इसे लंबे समय तक एक बहुत लोकप्रिय विकल्प बना दिया। आप चार्ट को JPG, PNG, SVG और PDF फॉर्मेट में एक्सपोर्ट कर सकते हैं।

आप व्यक्तिगत परियोजनाओं में FusionCharts के वॉटरमार्क संस्करण का मुफ्त में उपयोग कर सकते हैं। हालाँकि, वॉटरमार्क हटाने के लिए आपको एक वाणिज्यिक लाइसेंस खरीदना होगा।

फ्लोट

फ़्लोट - जावास्क्रिप्ट चार्ट लाइब्रेरी

फ्लोट jQuery के लिए एक जावास्क्रिप्ट चार्टिंग लाइब्रेरी है। यह सबसे पुराने और सबसे लोकप्रिय चार्टिंग पुस्तकालयों में से एक है।

फ्लोट लाइनों, बिंदुओं, भरे हुए क्षेत्रों, सलाखों और इनमें से किसी भी संयोजन का समर्थन करता है। यह पुराने ब्राउज़रों के साथ भी संगत है — IE6 और Firefox 2 पर वापस।

फ्लोट उपयोग करने के लिए पूरी तरह से स्वतंत्र है। यहाँ एक है उदाहरण रेखांकन की सूची फ्लोट का उपयोग करके बनाया गया।

एमचार्ट्स

amCharts - जावास्क्रिप्ट चार्ट पुस्तकालय

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

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

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

इस शानदार चेकआउट करें amCharts . का उपयोग करके बनाए गए शानदार डेमो का संग्रह.

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

कैनवासजेएस

कैनवास - जावास्क्रिप्ट चार्ट पुस्तकालय

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

यहाँ एक है कैनवासजेएस चार्ट उदाहरणों का इंटरैक्टिव संग्रह.

टोस्ट यूआई चार्ट

टोस्टुइचार्ट - जावास्क्रिप्ट चार्ट पुस्तकालय

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

कोई चार्ट

AnyChart - जावास्क्रिप्ट चार्ट पुस्तकालय

कोई चार्ट एम्बेडेड और एकीकृत करने के लिए डिज़ाइन किए गए चार्ट के साथ एक हल्का और मजबूत जावास्क्रिप्ट चार्टिंग लाइब्रेरी है। AnyChart आपको 68 चार्ट आउट-ऑफ-द-बॉक्स प्रदर्शित करने की अनुमति देता है और अपने स्वयं के चार्ट प्रकार बनाने के लिए सुविधाएँ प्रदान करता है। आप एक चार्ट को पीडीएफ, पीएनजी, जेपीजी या एसवीजी प्रारूप में एक छवि के रूप में सहेज सकते हैं।

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

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

निष्कर्ष

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

यदि आप तैयार चार्ट बनाने के लिए टूल की तलाश कर रहे हैं, तो अद्भुत ऑनलाइन चार्ट बनाने के लिए 5 टूल पर जाएं। आप D3.js के साथ आरंभ करने के लिए D3.js का उपयोग करके सरल रेखा और बार चार्ट बनाना भी पढ़ सकते हैं। हमारे पास कोणीय के साथ Google चार्ट का उपयोग करने पर एक समर्पित श्रृंखला भी है, और एक पुस्तक: डी3 के साथ डेटा विज़ुअलाइज़ेशन का एक परिचय।

वहाँ बहुत सारे अन्य चार्टिंग और रेखांकन पुस्तकालय हैं। यहाँ कुछ और जाँच के लायक हैं:

  • गोजेएस इंटरैक्टिव फ़्लोचार्ट्स, ऑर्ग चार्ट्स, डिज़ाइन टूल्स, प्लानिंग टूल्स, विज़ुअल भाषाओं के लिए एक जावास्क्रिप्ट डायग्रामिंग लाइब्रेरी है।
  • C3.js एक D3-आधारित पुन: प्रयोज्य चार्ट लाइब्रेरी है।
  • हिलकोरे D3 द्वारा संचालित व्यापार विश्लेषण के लिए एक वस्तु-उन्मुख API है।
  • सनदी, माध्यम द्वारा, एक उपकरण है जो स्वचालित रूप से डेटा की कल्पना करता है। आप इसे केवल डेटा फ़ाइल का लिंक दें। (आप इसके बारे में और अधिक पढ़ सकते हैं मध्यम पर।)
  • स्मूथी चार्ट मददगार हो सकता है, अगर आप स्ट्रीम रीयल-टाइम डेटा के साथ काम कर रहे हैं।
  • चार्टकिक.जेएस एक पुस्तकालय है जो आपको जावास्क्रिप्ट की एक पंक्ति के साथ सुंदर चार्ट बनाने की अनुमति देता है।
  • मॉरिस.जेएस स्वच्छ इंटरफ़ेस के साथ एक शक्तिशाली पुस्तकालय है। यह आपको आसानी से अच्छे दिखने वाले चार्ट बनाने की अनुमति देता है। यह jQuery और राफेल जावास्क्रिप्ट लाइब्रेरी पर आधारित है।

अंत में, इन्फोग्राफिक्स को शीघ्रता से बनाने के लिए यहां कुछ सरल उपकरण दिए गए हैं:

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

यदि आपको अपने जावास्क्रिप्ट कौशल में सुधार करने की आवश्यकता है, तो आप हमारी लाइब्रेरी में विभिन्न जावास्क्रिप्ट पुस्तकें भी देख सकते हैं।

Leave a Reply