9 जावास्क्रिप्ट लाइब्रेरी इंटरएक्टिव चार्ट बनाने के लिए

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

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

1. चार्ट जेएस

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

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

चार्टिस्ट जेएस उत्तरदायी चार्ट बनाने के लिए महान पुस्तकालय है जो एसवीजी का उपयोग करता है। अपनी जवाबदेही के अलावा, चार्टिस्ट आपको चिंताओं के स्पष्ट पृथक्करण का उपयोग करके लचीलापन देता है: सीएसएस के साथ शैली और जेएस के साथ नियंत्रण। अनुकूलन को आसान बनाने के लिए, SASS फाइलें शामिल हैं। यहाँ महान बात यह है कि आपके पास चार्टिस्ट एनीमेशन एपीआई, एसएमआईएल का उपयोग करके अपने चार्ट को चेतन करने के लिए असीम विकल्प हैं, जो आपको अतिरिक्त एनीमेशन विकल्प प्रदान करता है।.

3. सी 3 जेएस

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

4. फ्लोट

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

5. ईशरथ

Echart चीन से एक अद्भुत व्यापक पुस्तकालय है जो कई चार्ट प्रकारों का समर्थन करता है, बड़े डेटा को संसाधित कर सकता है (कार्टेसियन चार्ट पर 200,000 डेटा बिंदुओं की साजिश रचता है), पैमाने पर रोमिंग है, अनायास कई चार्टों के बीच डेटा को निकालने, एकीकृत और विनिमय करने की क्षमता है, अनुमति देता है एक आसानी से एक डेटा प्रकार से दूसरे में स्विच, और एक पूरी बहुत अधिक.

6. सहृदयता

Peity आपके वेब पेज पर एक छोटा चार्ट जोड़ेगा। यह एक छोटा jQuery प्लगइन है जो किसी तत्व को मिनी में बदल देता है svg लाइन, बार, डोनट, या पाई चार्ट। आपको बस एक तत्व बनाने और मूल्य देने की आवश्यकता है 1/5 और एक कॉल करें peity ( 'पाई') एक मिनी पाई चार्ट बनाने के लिए उस तत्व पर। उदाहरण के लिए, डोनट चार्ट बनाने के लिए जो केवल एक-पांचवां हाइलाइट किया गया है, यहां HTML है:

1/5

आप चार्ट रंग, त्रिज्या, चौड़ाई और ऊंचाई को अनुकूलित कर सकते हैं, लेकिन डिफ़ॉल्ट रूप से यह छोटे आकार में प्रदर्शित होता है.

7. डीसी जेएस

डीसी जेएस प्रयुक्त इंजन के संदर्भ में C3 JS के साथ समानता है; वे दोनों एसवीजी में चार्ट को रेंडर करने के लिए डी 3 लाइब्रेरी का उपयोग करते हैं। DC JS आपको ब्राउज़र और मोबाइल उपकरणों के लिए डेटा और विश्लेषण की कल्पना करने में मदद करने के लिए बनाया गया है। चूंकि यह डीएस जेएस पर लाभ उठाता है, यह आपको अपने चार्ट में उपयोगकर्ता इंटरैक्शन को जोड़ने की अनुमति देता है। डीसी जेएस सरल से उच्च जटिलताओं के चार्ट बनाने के लिए एक शक्तिशाली पुस्तकालय है.

8. गूगल चार्ट

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

अपने चार्ट को प्रदर्शित करने के लिए उस आईडी के साथ.

9. एनवीडी 3

NVD3 पुन: प्रयोज्य चार्ट और चार्ट घटकों का एक समूह है जो डी 3 जेएस के साथ बनाया गया है। यह लाइब्रेरी इसलिए एक 'टेम्प्लेट' है जो चार्ट बनाने में आपके लिए आसान बनाने में मदद करेगी। यहां NVD3 के साथ निर्मित कई नमूना चार्ट देखें.

अब पढ़ें: इंटरएक्टिव और अनुकूलित मानचित्र बनाने के लिए जावास्क्रिप्ट लाइब्रेरी