सीएसएस रेखांकन, चार्ट और अधिक के साथ डेटा विज़ुअलाइज़ेशन

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

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

आप और अधिक चाहते हैं? खिसकते रहो!

आड़ा तिरछा

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

CSSplay

बार चार्ट प्रत्येक पंक्ति में परिभाषित शैलियों और वर्गों के साथ एक निश्चित सूची है। पहले चार्ट में एक त्रुटि है जो तब होती है जब मान 100% के करीब हो जाते हैं जो दूसरे चार्ट में सुधारा जाता है। आपके संदर्भ के लिए स्रोत कोड शामिल है.

प्रतिशत बैरग्राफ

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

Maxdesign

Russ Weakley आपको प्रतिशत के आधार पर एक ग्राफ बनाना और पृष्ठभूमि चित्रों का उपयोग करना सिखाता है। लिंक किए गए कोड और छवियों को आपकी परियोजना में उपयोग करने के लिए कॉपी और डाउनलोड किया जा सकता है.

ऊर्ध्वाधर पट्टीदार

डेटा सेट को स्टाइल करने के लिए अलग-अलग बार के पिक्सल में एक साधारण सूची, बार समूह और क्लास के y- अक्ष के साथ सीएसएस और पीएचपी का उपयोग करके ऊर्ध्वाधर बार ग्राफ बनाएं। एरिक मेयर आपको एक ही तकनीक का उपयोग करके एक बार ग्राफ, लाइन ग्राफ, नुकीले ग्राफ और एक 3 डी ग्राफ में बदल जाता है

शुद्ध सीएसएस लाइनग्राफ

रेखा रेखांकन संख्याओं के साथ तालिकाओं की तुलना में बहुत तेजी से जानकारी प्रदान करते हैं। HTML का उपयोग करके CSS के साथ एक लाइन ग्राफ बनाना सीखें, टेक्स्ट को छवियों के साथ बदलें और लाइन ग्राफ प्राप्त करने के लिए CSS स्प्राइट्स और पूर्ण स्थिति का उपयोग करें.

सिंपल लाइनग्राफ

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

Mgraph

यह अजाक्स ग्राफ़ केवल सीएसएस और एक्सएचटीएमएल का उपयोग करके प्रत्येक माह के अनुसार एक वर्ष के डेटा का प्रतिनिधित्व करने के लिए उपयोग किया जाता है और फ़ायरफ़ॉक्स और ओपेरा में चलता है

बहुरंगी सूची

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

Bulletgraph

एक बुलेट ग्राफ एक एकल उपाय की तुलना एक या अधिक अन्य उपायों से करता है और प्रदर्शन की गुणात्मक सीमा प्रदर्शित करता है। वे डेटा संचालित साइटों के लिए काफी लचीले हैं। CSS / HTML का उपयोग करके बुलेट ग्राफ बनाना सीखें.

कॉलम बारग्राफ

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

डाउनटाइम ग्राफ

डाउनटाइम ग्राफ में शुरू में सीमित स्क्रीन क्षेत्र पर लंबे समय के अंतराल को प्रदर्शित करने और मासिक कैलेंडर प्रतिमान द्वारा स्पष्ट किए गए घटनाओं के पारदर्शी लेआउट को रखने में समस्या थी। OnMouseOver () को चालू रखा जाता है और विभिन्न प्रकार के डाउनटाइम ईवेंट के लिए अलग-अलग रंगों का उपयोग किया जाता है.

गतिशील लाइव सीएसएस ग्राफ

वेब सर्वर द्वारा निष्पादित पिंग की प्रतिक्रिया समय प्रदर्शित करने के लिए एक लाइव डायनेमिक सीएसएस ग्राफ सीएसएस और जावास्क्रिप्ट कोड, AJAX फ़ंक्शंस और ग्राफ़ स्लाइडिंग के साथ एक वेब सर्वर से डेटा पढ़ता है.

क्षैतिज मोलभाव

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

Multigraph

एक रेखा ग्राफ, जो किसी भी तालिकाओं की छवियों का उपयोग नहीं करता है CSS और DHTML के साथ बनाया गया है जो तेजी से लोड होता है और पृष्ठभूमि को पारदर्शी के रूप में बदला जा सकता है.

उत्पादन योजना का ग्राफ

एक उत्पादन योजना का ग्राफ़ ग्राफ कंटेनर और hine के रूप में ग्राफ क्लास का उपयोग करके बनाया गया है, जिससे विभाजक रेखाएँ ड्राइंग के लिए vLine हैं। इस ग्राफ का उपयोग इंट्रानेट अनुप्रयोगों में किया जाता है। ग्राफ़ की चौड़ाई की गणना नौकरी की संख्या का उपयोग करते हुए प्रदर्शित दिनों और ऊंचाई के अनुसार की जाती है.

सैंडविच ग्राफ

एक सैंडविच ग्राफ तब बनाया जाता है जब एक बार ग्राफ में एक एकल पट्टी कई परतों को विभाजित करती है जहां एक कॉलम की ऊंचाई एक वैश्विक प्रवृत्ति का संकेत दे सकती है जबकि एक परत की ऊंचाई इस परत के एक हिस्से को इंगित करती है। इस ट्यूटोरियल से एक सीएसएस सैंडविच ग्राफ बनाएं.

ढेर लगा दिया

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

साधारण मोलभाव

CSS और PHP sans ग्राफिक्स लाइब्रेरी का उपयोग करके बनाया गया एक बार ग्राफ और मार्जिन के लिए उपयोग किए गए बहुत अधिक गणना के बिना। पैडिंग ने उस तकनीक को समझना काफी आसान बना दिया जो केवल उपयोग करती थी