बिलबोर्ड.जेएस के साथ जावास्क्रिप्ट-संचालित डेटा चार्ट बनाएँ

वेब सामग्री को बेहतर बनाने में ग्राफिक्स और विजुअल महत्वपूर्ण भूमिका निभाते हैं। आधुनिक तकनीक के साथ अपने पेज में SVG आइकन जैसे कस्टम विजुअल को जोड़ना इतना आसान है.

लेकिन एक और आश्चर्यजनक दृश्य जो आप स्क्रैच से बना सकते हैं वह है एक वेब चार्ट.

यह आपकी मदद कर सकता है डेटा को नेत्रहीन रूप से रेखांकन करें ताकि आपके आगंतुक जल्दी से प्रासंगिक जानकारी को छोड़ सकें। और एक ग्राफ को स्वयं कोड करने के बजाय आप बिलबोर्ड की तरह एक पुस्तकालय का उपयोग कर सकते हैं। सभी भारी उठाने के लिए.

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

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

बस ध्यान दें कि पूरा कोडबेस ES6 सिंटैक्स का उपयोग करता है जो कम-अनुभवी जेएस देवों को भ्रमित कर सकता है.

जब तक आप कोड को संकलित करना जानते हैं आप ठीक रहें। यदि आप अधिक जानना चाहते हैं तो हमने वास्तव में ईएस 6 से कुछ गर्म सुविधाओं को कवर किया है.

इस प्लगइन के बारे में सभी तकनीकी विवरण अच्छे लग सकते हैं। लेकिन आप शायद जानना चाहते हैं यह क्या कर सकता है.

डेमो पेज पर एक नज़र डालें और कुछ लाइव उदाहरणों पर क्लिक करें.

आपको पाई ग्राफ़ से लेकर स्कैटर प्लॉट और कस्टम एनिमेटेड बार ग्राफ़ सब कुछ मिलेगा.

बिलबोर्ड के साथ। आपके पास अपने डेटा पर पूर्ण नियंत्रण. आप यह नियंत्रित करते हैं कि यह पृष्ठ पर कैसे दिखाई देता है, यह कैसे संरचित है, और आप किस प्रकार की UI / UX सुविधाएँ जोड़ते हैं (यदि कोई हो).

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

यदि आप अपने ब्राउज़र में कोड के साथ खिलौना चाहते हैं, तो आप CodePen पर इस स्निपेट में भी खुदाई कर सकते हैं.