आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

चार्ट आपके उपयोगकर्ताओं को डेटा देखने का एक सुविधाजनक, आकर्षक तरीका प्रदान करते हैं। वे डेटा को समझने में आसान बना सकते हैं और आपके ऐप को अधिक इंटरैक्टिव बना सकते हैं।

रिएक्ट में चार्ट बनाने के कई तरीके हैं, जिनमें बेसिक सीएसएस या रिएक्ट-विज़ या रिएक्ट गूगल चार्ट जैसी लाइब्रेरी का उपयोग करना शामिल है।

CSS के साथ रिएक्ट में चार्ट कैसे बनाएं

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

आयात प्रतिक्रिया से'प्रतिक्रिया';
कॉन्स्ट चार्ट = () => {
वापस करना (


चौड़ाई: '100 पीएक्स', ऊंचाई: '300पीएक्स', पृष्ठभूमि का रंग: '#5D6AFF'}}/>
 );
}
निर्यातगलती करना चार्ट;

उपरोक्त कोड में, हमने रिएक्ट लाइब्रेरी का आयात किया। फिर हमने चार्ट नामक एक फ़ंक्शन बनाया जो 100px की चौड़ाई, 300px की ऊँचाई और #5D6AFF के पृष्ठभूमि रंग के साथ एक div लौटाता है। यह नीले रंग की पृष्ठभूमि के साथ एक मूल चार्ट तैयार करेगा। आप भी कर सकते हैं

instagram viewer
सामग्री यूआई का प्रयोग करें या आपके रिएक्ट ऐप में टेलविंड सीएसएस चार्ट बनाने के लिए।

अधिक जटिल चार्ट बनाने के लिए आप divs के अंदर टेक्स्ट या छवियों के साथ कई चार्ट भी बना सकते हैं।

आयात प्रतिक्रिया से'प्रतिक्रिया';
कॉन्स्ट चार्ट = () => {
वापस करना (
<डिव>


चौड़ाई: '100 पीएक्स', ऊंचाई: '300पीएक्स', पृष्ठभूमि का रंग: '#5D6AFF'}}>
<पी>चार्ट 1पी>
डिव>
चौड़ाई: '100 पीएक्स', ऊंचाई: '300पीएक्स', पृष्ठभूमि का रंग: '#FFCF00'}}>
<आईएमजीस्रोत=" https://dummyimage.com/40x80/000/0011ff"शैली={{गद्दी:'100 पीएक्स30 पीएक्स'}} />
डिव>
डिव>
 );
}


निर्यातगलती करना चार्ट;

रिएक्ट-विज़ लाइब्रेरी का उपयोग करके रिएक्ट चार्ट

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

रिएक्ट-विज़ का उपयोग करने के लिए, आपको पहले करना होगा एक बेसिक रिएक्ट ऐप बनाएं और पुस्तकालय स्थापित करें। आप इसे निम्न आदेश के साथ कर सकते हैं:

NPM स्थापित करना प्रतिक्रिया-विज़

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

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात {
 एक्सवाईप्लॉट,
 रेखा श्रृंखला,
 वर्टिकलग्रिडलाइन्स,
 क्षैतिज ग्रिडलाइन्स,
 एक्स अक्ष,
 याक्सिस
} से'प्रतिक्रिया-विज़';


कॉन्स्ट चार्ट = () => {
कॉन्स्ट [डेटा] = यूज़स्टेट ([
 { एक्स: 0, वाई: 8 },
 { एक्स: 1, वाई: 5 },
 { एक्स: 2, वाई: 4 },
 { एक्स: 3, वाई: 9 },
 { एक्स: 4, वाई: 1 },
 { एक्स: 5, वाई: 7 },
 { एक्स: 6, वाई: 6 },
 { एक्स: 7, वाई: 3 },
 { एक्स: 8, वाई: 2 },
 { एक्स: 9, वाई: 0 }
 ]);


वापस करना (
<XYप्लॉटचौड़ाई={300}ऊंचाई={300}>
<वर्टिकलग्रिडलाइन्स />
<क्षैतिज ग्रिडलाइन्स />
<एक्स अक्ष />
<याक्सिस />
<रेखाश्रृंखलाआंकड़े={आंकड़े} />
XYप्लॉट>
 );
}
निर्यातगलती करना चार्ट;

उपरोक्त कोड रिएक्ट और रिएक्ट-विज़ पुस्तकालयों का आयात करता है। इसके बाद यह चार्ट नामक एक फ़ंक्शन को परिभाषित करता है जो वर्टिकलग्रिडलाइन्स, हॉरिज़ॉन्टलग्रिडलाइन्स, एक्सएक्सिस, वाईएक्सिस और लाइनसरीज के साथ एक एक्सवाईप्लॉट देता है। LineSeries डेटा ऐरे लेता है, जिसमें उन बिंदुओं के x और y निर्देशांक होते हैं जो लाइन बनाते हैं।

प्रतिक्रिया Google चार्ट लाइब्रेरी का उपयोग करना

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

रिएक्ट गूगल चार्ट्स का उपयोग करने के लिए, आपको सबसे पहले लाइब्रेरी को इंस्टॉल करना होगा। आप इसे निम्न आदेश के साथ कर सकते हैं:

NPM स्थापित करना प्रतिक्रिया-गूगल-चार्ट

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

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात { चार्ट } से'प्रतिक्रिया-गूगल-चार्ट';
कॉन्स्ट माईचार्ट = () => {
कॉन्स्ट [डेटा] = यूज़स्टेट ([
['वर्ष', 'बिक्री', 'खर्च'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


वापस करना (
 चौड़ाई = {'400पीएक्स'}
 ऊँचाई = {'300पीएक्स'}
 चार्ट टाइप ="छड़"
 डेटा = {डेटा}
 />
 );
}
निर्यातगलती करना MyChart;

यह कोड प्रतिक्रिया और प्रतिक्रिया-google-चार्ट लाइब्रेरी आयात करता है। यह तब MyChart नामक एक फ़ंक्शन बनाता है जो एक चार्ट घटक देता है। चार्ट घटक डेटा सरणी लेता है, जिसमें चार्ट बनाने वाले बिंदुओं के लेबल और मान होते हैं।

CSS का उपयोग करने के नुकसान

प्रतिक्रिया में चार्ट बनाने के लिए CSS का उपयोग करने के कुछ नुकसान हैं:

  • उपयोग करना कठिन है: यदि आप जटिल चार्ट बनाना चाहते हैं, तो CSS का उपयोग करना कठिन हो सकता है।
  • बहुत लचीला नहीं: सीएसएस बहुत लचीला नहीं है, इसलिए आपके चार्ट में बदलाव करना मुश्किल हो सकता है।
  • इंटरएक्टिव नहीं: सीएसएस चार्ट इंटरएक्टिव नहीं हैं, इसलिए आपके उपयोगकर्ता उनके साथ इंटरैक्ट नहीं कर पाएंगे।

यदि आप जटिल चार्ट बनाना चाहते हैं, तो रिएक्ट-विज़ और रिएक्ट-गूगल-चार्ट बेहतर विकल्प हैं। हालाँकि, यदि आप साधारण चार्ट बनाना चाहते हैं, तो CSS एक अच्छा विकल्प हो सकता है।

रिएक्ट-विज़ का उपयोग करने के लाभ

रिएक्ट में चार्ट बनाने के लिए रिएक्ट-विज़ का उपयोग करने के कई लाभ हैं:

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

यदि आप जटिल चार्ट बनाना चाहते हैं जो इंटरैक्टिव और एनिमेटेड हैं, तो रिएक्ट-विज़ एक अच्छा विकल्प है।

प्रतिक्रिया Google चार्ट का उपयोग करने के लाभ

रिएक्ट-विज़ की तरह, रिएक्ट में चार्ट बनाने के लिए रिएक्ट गूगल चार्ट का उपयोग करने के कई फायदे हैं:

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

चार्ट के साथ उपयोगकर्ता जुड़ाव बढ़ाएँ

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

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