बार चार्ट: क्षैतिज व्यवस्था और लेबल अनुकूलन

क्षैतिज बार चार्ट रैंकिंग डेटा, लंबे श्रेणी नामों या प्रगति मापदंडों को दिखाने के लिए आदर्श हैं। एक्स-अक्ष के साथ बार को बढ़ाकर, इस दृश्य संरचना श्रेणी लेबल को पर्याप्त क्षैतिज जगह प्रदान करती है, जिससे टेक्स्ट को झुकाने या काटने की आवश्यकता नहीं होती है। चाहे आप टॉप-10 लीडरबोर्ड तालिकाएं, सर्वेक्षण प्रतिक्रिया विभाजन या क्षैतिज प्रदर्शन तुलनाएं बना रहे हों, बार चार्ट डेस्कटॉप और मोबाइल स्क्रीन दोनों पर स्पष्ट पठनीयता प्रदान करते हैं।

क्षैतिज बार के यांत्रिकी

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

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

एक मूल क्षैतिज बार चार्ट बनाने के लिए, सेट करें प्रकार: 'श्रेणी' पर yAxis और अपनी डेटा ऐरे प्रदान करें, जबकि सेट करें प्रकार: 'मान' पर xAxis:

विकल्प = {
    सुझाव: {
        ट्रिगर: 'अक्ष',
        अक्ष संकेतक: { प्रकार: 'छाया' }
    },
    xअक्ष: {
        प्रकार: 'मान'
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['ब्राजील', 'इंडोनेशिया', 'यूएसए', 'भारत', 'चीन']
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [214, 273, 331, 1380, 1411]
        }
    ]
};

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

क्षैतिज बार चार्ट आधुनिक डैशबोर्ड डिजाइनों के लिए एकाधिक डेटा समूहों, लक्षित हाइलाइटिंग और कस्टम कोने के उपचार का समर्थन करते हैं।

1. बहु-श्रृंखला क्षैतिज तुलना

कई वस्तुओं को श्रृंखला श्रेणी लेबल के लिए समूहित क्षैतिज बार बनाने के लिए एक ऐरे:

विकल्प = {
    प्रतीक: {
        डेटा: ['2025 लक्ष्य', '2025 वास्तविक']
    },
    xअक्ष: {
        प्रकार: 'मान'
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['प्रोजेक्ट ए', 'प्रोजेक्ट बी', 'प्रोजेक्ट सी', 'प्रोजेक्ट डी']
    },
    श्रृंखला: [
        {
            नाम: '2025 लक्ष्य',
            प्रकार: 'बार',
            डेटा: [80, 95, 70, 85]
        },
        {
            नाम: '2025 वास्तविक',
            प्रकार: 'बार',
            डेटा: [85, 90, 75, 92]
        }
    ]
};

2. गोल छोर और हाइलाइट स्टाइलिंग

गोल दाहिने कोने के उपयोग करके लागू करेंसीमा त्रिज्या क्षैतिज बार पर (निर्दिष्ट करते हुए[ऊपरी-दाहिना, निचला-दाहिना, निचला-बाएं, ऊपरी-बाएं]):

विकल्प = {
    xअक्ष: {
        प्रकार: 'मान'
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['सीधा खोज', 'ईमेल अभियान', 'सोशल मीडिया', 'भुगतान की खोज']
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [
                120,
                200,
                {
                    मान: 450,
                    आइटम शैली: {
                        रंग: '#fac858'
                    }
                },
                280
            ],
            आइटम शैली: {
                रंग: '#91cc75',
                सीमा त्रिज्या: [0, 6, 6, 0] // केवल दाहिने छोर गोल करें
            }
        }
    ]
};

लेआउट और अंतराल का बेहतरीन नियंत्रण

क्योंकि क्षैतिज श्रेणी लेबल में पाठ की लंबाई में भिन्नता होती है, बाएं मार्जिन और लेबल संरेखण को समायोजित करने से लेबल के कटने से बचा जा सकता है।

1. कंटेनर ग्रिड मार्जिन

उपयोग करेंग्रिडलंबे Y-अक्ष लेबल के लिए पर्याप्त स्थान आवंटित करने के लिए विन्यास ब्लॉक का उपयोग करें:

विकल्प = {
    ग्रिड: {
        बाएं: '15%',  // लंबे श्रेणी पाठ के लिए बाएं मार्जिन बढ़ाएं
        दाएं: '8%',
        नीचे: '10%',
        लेबल समावेश करें: सच
    },
    xअक्ष: {
        प्रकार: 'मान'
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: [
            'एंटरप्राइज इंफ्रास्ट्रक्चर आधुनिकीकरण',
            'क्लाउड माइग्रेशन चरण 2',
            'डेटाबेस अनुकूलन',
            'एपीआई गेटवे पुनर्डिजाइन'
        ]
    },
    श्रृंखला: [
        {
            प्रकार: 'बार',
            डेटा: [75, 60, 90, 40],
            बार चौड़ाई: '50%'
        }
    ]
};

रणनीतिक बेस्ट प्रैक्टिसेज

• डेटा को जानबूझकर क्रमबद्ध करें: जब भी संभव हो, क्षैतिज बार को आरोही या अवरोही क्रम में व्यवस्थित करें। रैंक किए गए सूचियाँ पाठकों के लिए शीर्ष प्रदर्शनकारी को तुरंत स्पष्ट करती हैं।
• उपयोग करेंcontainLabel: सत्य: हमेशा शामिल करें containLabel: सत्य के अंदर ग्रिड कॉन्फ़िगरेशन लंबे श्रेणी शीर्षकों के कैनवास के किनारे से बाहर निकलने से रोकने के लिए।
• सीधे मान लेबल: साफ लीडरबोर्ड के लिए, प्रत्येक बार के अंत में डेटा मान को सीधे प्रदर्शित करने के बारे में सोचें, इस्तेमाल करके लेबल: { दिखाएँ: सत्य, स्थिति: 'दाएँ' } और संख्यात्मक नीचे के एक्सिस को पूरी तरह से छिपाना।