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

आप चार्ट.जेएस के साथ डेटा विज़ुअलाइज़ेशन कैसे बनाना शुरू कर सकते हैं? आप इस लेख में जानेंगे कि कैसे।

आएँ शुरू करें।

चार्ट.जेएस क्या है?

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

पुस्तकालय डेटासेट और अन्य अनुकूलन मापदंडों जैसे कि पृष्ठभूमि का रंग, बॉर्डर का रंग, और बहुत कुछ स्वीकार करता है। डेटासेट में से एक है लेबल, जो एक्स-अक्ष पर मूल्यों का प्रतिनिधित्व करता है। दूसरा संख्यात्मक मानों का एक समूह है, जो आमतौर पर Y-अक्ष पर स्थित होता है।

आपको चार्ट ऑब्जेक्ट के भीतर ग्राफ़ प्रकार निर्दिष्ट करने की भी आवश्यकता है ताकि पुस्तकालय जानता हो कि कौन सा ग्राफ प्लॉट करना है।

चार्ट.जेएस के साथ चार्ट कैसे बनाएं

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

सम्बंधित:सीएसएस और जावास्क्रिप्ट के साथ अपनी वेबसाइट को उत्तरदायी और इंटरएक्टिव कैसे बनाएं

उपयोग शुरू करने के लिए चार्ट.जेएस, आवश्यक फ़ाइलें बनाएँ। इस ट्यूटोरियल के लिए, फ़ाइल नाम हैं चार्ट.html, प्लॉट.जेएस, तथा index.css. आप अपनी फ़ाइलों के लिए किसी भी नामकरण परंपरा का उपयोग कर सकते हैं।

अब, निम्नलिखित में पेस्ट करें सिर चार्ट.जेएस सामग्री वितरण नेटवर्क (सीडीएन) से लिंक करने के लिए आपकी एचटीएमएल फ़ाइल का अनुभाग।

में चार्ट.html:

स्रोत = " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

इसके बाद, अपने चार्ट को होल्ड करने के लिए एक HTML कैनवास बनाएं और उसे एक दें पहचान. साथ ही, सीएसएस (index.css) फ़ाइल से कनेक्ट करें सिर अनुभाग और अपनी जावास्क्रिप्ट (plot.js) फ़ाइल को इंगित करें तन अनुभाग।

HTML फ़ाइल की संरचना इस तरह दिखती है:

 चार्ट

और अपने में सीएसएस:

तन{
 पृष्ठभूमि-रंग:#383735;
}
एच1{
 रंग:#e9f0e9;
 मार्जिन-बाएं: 43%;
}
#प्लॉट{
 मार्जिन: ऑटो;
 पृष्ठभूमि-रंग: #2e2d2d;
}

ऊपर दी गई CSS स्टाइल एक सेट कन्वेंशन नहीं है। तो आप अपनी डीओएम संरचना के आधार पर अपनी पसंद के अनुसार स्टाइल कर सकते हैं। एक बार आपकी HTML और CSS फाइलें तैयार हो जाने के बाद, जावास्क्रिप्ट के साथ अपने चार्ट तैयार करने का समय आ गया है।

रेखा चार्ट

के साथ एक लाइन चार्ट बनाने के लिए चार्ट.जेएस, आप चार्ट सेट करेंगे प्रकार प्रति रेखा. यह पुस्तकालय को एक रेखा चार्ट बनाने के लिए कहता है।

इसे प्रदर्शित करने के लिए, अपनी जावास्क्रिप्ट फ़ाइल में:

// HTML कैनवास को उसकी आईडी से प्राप्त करें
प्लॉट्स = document.getElementById ("प्लॉट्स");
// एक्स और वाई-अक्ष के लिए उदाहरण डेटासेट
वर महीने = ["जनवरी", "फरवरी", "मार्च", "अप्रैल", "मई", "जून", "जुलाई"]; // X-अक्ष पर रहता है
वर यातायात = [65, 59, 80, 81, 56, 55, 60] // Y-अक्ष पर रहता है
// चार्ट ऑब्जेक्ट का एक उदाहरण बनाएं:
नया चार्ट (भूखंड, {
 टाइप करें: 'लाइन', // चार्ट प्रकार घोषित करें
 आंकड़े: {
 लेबल: महीने, // एक्स-अक्ष डेटा
 डेटासेट: [{
 डैटा ट्रैफिक, // वाई-अक्ष डेटा
 पृष्ठभूमि रंग: '#5e440f',
 सीमा रंग: 'सफेद',
 भरना: झूठा, // लाइन के नीचे के कर्व को बैकग्राउंड कलर से भर देता है। यह डिफ़ॉल्ट रूप से सच है
 }]
 },
});

उत्पादन:

बदलने के लिए स्वतंत्र महसूस करें भरना करने के लिए मूल्य सच, अधिक डेटा का उपयोग करें, या क्या होता है यह देखने के लिए रंगों को कमजोर करें।

जैसा कि आप भी देख सकते हैं, चार्ट के शीर्ष पर एक छोटा सा लेजेंड बॉक्स है। आप इसे वैकल्पिक के अंदर हटा सकते हैं विकल्प पैरामीटर।

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

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

// चार्ट ऑब्जेक्ट का एक उदाहरण बनाएं:
नया चार्ट (भूखंड, {
 टाइप करें: 'लाइन', // चार्ट प्रकार घोषित करें
 आंकड़े: {
 लेबल: महीने, // एक्स-अक्ष डेटा
 डेटासेट: [{
 डैटा ट्रैफिक, // वाई-अक्ष डेटा
 पृष्ठभूमि रंग: '#5e440f', // डॉट्स का रंग
 सीमा रंग: 'सफेद', //रेखा रंग
 भरना: झूठा, // लाइन के नीचे के कर्व को बैकग्राउंड कलर से भर देता है। यह डिफ़ॉल्ट रूप से सच है
 }]
 },
 // कस्टम विकल्प निर्दिष्ट करें:
 विकल्प: {
 किंवदंती: {प्रदर्शन: झूठा}, // लेजेंड बॉक्स को असत्य पर सेट करके निकालें। यह डिफ़ॉल्ट रूप से सच है।
// तराजू के लिए सेटिंग्स निर्दिष्ट करें। उदाहरण के लिए, Y-अक्ष को शून्य से प्रारंभ करने के लिए:
 तराजू:{
 yAxes: [{टिक: {मिनट: 0}}] // यदि आप पूर्णांक होते हैं तो आप इसे एक्स-अक्ष के लिए दोहरा सकते हैं।
 }
 } 
});

उत्पादन:

आप प्रत्येक बिंदु के लिए अलग-अलग पृष्ठभूमि रंगों का भी उपयोग कर सकते हैं। हालांकि, इस तरह से पृष्ठभूमि के रंगों को बदलना आमतौर पर बार ग्राफ़ के साथ अधिक सहायक होता है।

चार्ट.जेएस के साथ बार ग्राफ बनाना

यहां, आपको केवल चार्ट बदलने की जरूरत है प्रकार प्रति छड़. आपको सेट करने की आवश्यकता नहीं है भरना विकल्प क्योंकि बार स्वचालित रूप से पृष्ठभूमि रंग प्राप्त करते हैं:

// चार्ट ऑब्जेक्ट का एक उदाहरण बनाएं:
नया चार्ट (भूखंड, {
 टाइप करें: 'बार', // चार्ट प्रकार घोषित करें
 आंकड़े: {
 लेबल: महीने, // एक्स-अक्ष डेटा
 डेटासेट: [{
 डैटा ट्रैफिक, // वाई-अक्ष डेटा
 पृष्ठभूमि रंग: '#3bf70c', // बार का रंग
 }]
 },
 विकल्प: {
 किंवदंती: {प्रदर्शन: झूठा}, // लेजेंड बॉक्स को असत्य पर सेट करके निकालें। यह डिफ़ॉल्ट रूप से सच है।
 }
});

उत्पादन:

वाई-अक्ष को शून्य या किसी भी मान से शुरू करने के लिए स्वतंत्र महसूस करें जैसा आपने लाइन चार्ट के लिए किया था।

सम्बंधित:जावास्क्रिप्ट ऐरे के तरीके जो आपको मास्टर करने चाहिए

प्रत्येक बार के लिए अलग-अलग रंगों का उपयोग करने के लिए, रंगों की एक सरणी पास करें जो आपके डेटा में आइटम्स की संख्या से मेल खाती हो पृष्ठभूमि का रंग पैरामीटर:

// चार्ट ऑब्जेक्ट का एक उदाहरण बनाएं:
नया चार्ट (भूखंड, {
 टाइप करें: 'बार', // चार्ट प्रकार घोषित करें
 आंकड़े: {
 लेबल: महीने, // एक्स-अक्ष डेटा
 डेटासेट: [{
 डैटा ट्रैफिक, // वाई-अक्ष डेटा
// प्रत्येक बार का रंग:
 पृष्ठभूमि का रंग: [
 "आरजीबीए (196, 190, 183)",
 "आरजीबीए (21, 227, 235)",
 "आरजीबीए (7, 150, 245)",
 "आरजीबीए (240, 5, 252)",
 "आरजीबीए (252, 5, 79)",
 "आरजीबी (0,12,255)",
 "आरजीबी (17, 252, 5)"],
 }]
 },
 विकल्प: {
 किंवदंती: {प्रदर्शन: झूठा}, // लेजेंड बॉक्स को असत्य पर सेट करके निकालें। यह डिफ़ॉल्ट रूप से सच है।
 }
});

उत्पादन:

चार्ट के साथ पाई चार्ट बनाना।js

पाई चार्ट बनाने के लिए, चार्ट प्रकार को इसमें बदलें पाई. आप लेजेंड के प्रदर्शन को इस पर भी सेट कर सकते हैं सच यह देखने के लिए कि पाई का प्रत्येक खंड क्या दर्शाता है:

// चार्ट ऑब्जेक्ट का एक उदाहरण बनाएं:
नया चार्ट (भूखंड, {
 प्रकार: 'पाई', // चार्ट प्रकार घोषित करें
 आंकड़े: {
 लेबल: महीने, // प्रत्येक खंड को परिभाषित करता है
 डेटासेट: [{
 डेटा: ट्रैफ़िक, // सेगमेंट का आकार निर्धारित करता है
 // प्रत्येक खंड का रंग
 पृष्ठभूमि का रंग: [
 "आरजीबीए (196, 190, 183)",
 "आरजीबीए (21, 227, 235)",
 "आरजीबीए (7, 150, 245)",
 "आरजीबीए (240, 5, 252)",
 "आरजीबीए (252, 5, 79)",
 "आरजीबी (0,12,255)",
 "आरजीबी (17, 252, 5)"],
 }]
 },
 विकल्प: {
 लेजेंड: {डिस्प्ले: ट्रू}, // यह डिफ़ॉल्ट रूप से सच है।
}
});

उत्पादन:

जैसा कि आपने ऊपर के उदाहरणों में किया था, आप अन्य चार्ट को बदलकर आज़मा सकते हैं प्रकार.

बहरहाल, यहाँ समर्थित की एक सूची है चार्ट.जेएस चार्ट प्रकार जिन्हें आप उपरोक्त कोडिंग सम्मेलनों का उपयोग करके आज़मा सकते हैं:

• छड़
• रेखा
• बिखराव
• डोनट
• पाई
• राडार
• ध्रुवीय क्षेत्र
• बुलबुला

चार्ट के साथ खेलें।जेएस

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

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

सीखने लायक 6 जावास्क्रिप्ट फ्रेमवर्क

विकास में सहायता के लिए वहां कई जावास्क्रिप्ट ढांचे हैं। यहां कुछ ऐसे हैं जिन्हें आपको जानना चाहिए।

आगे पढ़िए

लेखक के बारे में