स्तंभ चार्ट: मूल सेटअप, स्टाइलिंग और लेआउट

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

ऊर्ध्वाधर स्तंभों की यांत्रिकता

एपाची ईचार्ट्स में, क्षैतिज बार चार्ट और ऊर्ध्वाधर स्तंभ चार्ट दोनों का आधार है 'बार' श्रृंखला प्रकार। स्तंभ चार्ट बनाने का मुख्य कारक श्रेणी लेबल को क्षैतिज अक्ष (xAxis) पर रखना है, जबकि ऊर्ध्वाधर अक्ष (yAxis) को संख्यात्मक मानों पर सेट करना है। चार्ट इंजन डेटा ऐरे को पढ़ता है और प्रत्येक ऊर्ध्वाधर स्तंभ की ऊंचाई को संख्यात्मक पैमाने के संबंध में गतिशील रूप से स्केल करता है।

1. आवश्यक सेटअप

एक मूल स्तंभ चार्ट बनाने के लिए, एक श्रेणी-आधारित X-अक्ष परिभाषित करें और अपने डेटासेट को एक श्रृंखला ऑब्जेक्ट में मैप करें जिसमें प्रकार: 'बार':

विकल्प = {
    xAxis: {
        प्रकार: 'श्रेणी',
        डेटा: ['सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि', 'रवि']
    },
    yAxis: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};

उन्नत संरचनात्मक तकनीकें

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

बहु-श्रृंखला तुलना

एक साथ बहुत सारे डेटासेट की तुलना करने के लिए (जैसे वर्ष-दर-वर्ष राजस्व), श्रृंखला ऐरे में कई ऑब्जेक्ट जोड़ें। लेआउट इंजन प्रत्येक श्रेणी के अनुसार X-अक्ष के साथ संबंधित स्तंभों को समूहित करेगा:

विकल्प = {
    xAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxe: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            नाम: '2025 आय',
            प्रकार: 'बार',
            डेटा: [320, 332, 301, 334]
        },
        {
            नाम: '2026 आय',
            प्रकार: 'बार',
            डेटा: [220, 182, 191, 234]
        }
    ]
};

कस्टम कॉलम शैली और व्यक्तिगत हाइलाइटिंग

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

• रंग: भराव रंग सेट करता है (हेक्स, आरजीबी, या रैखिक धाराएँ)।
• सीमा त्रिज्या: कॉलम में गोल कोने जोड़ता है (उदाहरण के लिए, [5, 5, 0, 0] ऊपरी कोनों के लिए)।
• पारदर्शिता: कॉलम की पारदर्शिता समायोजित करता है।
• छाया धुंधलापन & छाया रंग: कॉलम में उभार और छाया ड्रॉप जोड़ता है।

विकल्प = {
    xAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['सीधा', 'ईमेल', 'विज्ञापन नेटवर्क', 'वीडियो विज्ञापन', 'खोज']
    },
    yAxe: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [
                320,
                332,
                {
                    मान: 401,
                    // एकल चोटी वाले कॉलम को हाइलाइट करें
                    आइटम शैली: {
                        रंग: '#ee6666',
                        सीमा त्रिज्या: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            आइटम शैली: {
                रंग: '#5470c6',
                सीमा त्रिज्या: [4, 4, 0, 0]
            }
        }
    ]
};

लेआउट और आकार को सूक्ष्म समायोजित करना

कॉलम के आकार और अंतराल पठनीयता को महत्वपूर्ण रूप से प्रभावित करते हैं, विशेष रूप से जब चार्ट को प्रतिक्रियाशील स्क्रीनों या घने डैशबोर्ड में प्रदर्शित किया जाता है।

1. चौड़ाई और सीमाओं को नियंत्रित करना

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

• बार चौड़ाई: निश्चित पिक्सेल या श्रेणी चौड़ाई के प्रतिशत का उपयोग करके कॉलम की चौड़ाई परिभाषित करता है (उदाहरण के लिए, '30%').
• बार अधिकतम चौड़ाई: चौड़े स्क्रीन डिस्प्ले पर कॉलम अत्यधिक फैलने से रोकने के लिए चौड़ाई पर ऊपरी सीमा सेट करता है।
• बार_न्यूनतम_ऊंचाई: निकट शून्य मानों को क्लिक करने योग्य और दिखाई देने योग्य बनाए रखने के लिए न्यूनतम पिक्सेल ऊंचाई लागू करता है।

2. कॉलम का अंतराल और बैकग्राउंड ट्रैक

अपने कॉलम को आधुनिक डैशबोर्ड दिखावट देने के लिए, आंतरिक अंतराल को समायोजित करें या पूरी ऊंचाई वाले बैकग्राउंड ट्रैक को सक्षम करें:

विकल्प = {
    xअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र']
    },
    yअक्ष: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [120, 200, 150, 80, 70],
            बार_चौड़ाई: '40%',
            पृष्ठभूमि_दिखाएं: सत्य,
            पृष्ठभूमि_शैली: {
                रंग: 'rgba(180, 180, 180, 0.15)',
                त्रिज्या: [4, 4, 0, 0]
            }
        }
    ]
};

रणनीतिक उत्तम व्यवहार

• अंतराल संतुलित रखें: सेट करने से बचेंबार_चौड़ाई बहुत चौड़ी (60% से अधिक) ताकि दृश्य व्यवस्था अत्यधिक भीड़ वाली लगे।
• क्षैतिज बनाम ऊर्ध्वाधर निर्णय: जब श्रेणी लेबल छोटे हों (उदाहरण के लिए, महीने, तिमाहियां, कोड), तो कॉलम चार्ट का उपयोग करें। यदि आपके लेबल लंबे वर्णन या नाम हैं, तो श्रेणी डेटा को yअक्ष के लिए बदलने का विचार करें ताकि क्षैतिज बार चार्ट बन सके।
• शून्य बेसलाइन अखंडता: हमेशा संख्यात्मक अक्ष को शून्य से शुरू करें (0)। कॉलम चार्ट में नीचे के स्केल को काटने से ऊंचाई अनुपात विकृत हो जाते हैं और दर्शकों को भ्रमित करते हैं।