स्टैक्ड बार चार्ट: क्षैतिज भाग-से-पूर्ण विभाजन

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

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

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

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

एक मूल स्टैक्ड बार चार्ट बनाने के लिए, सेट करें yAxis को प्रकार: 'श्रेणी', xAxis को प्रकार: 'मूल्य', और एक मेल खाने वाला स्टैकस्ट्रिंग प्रत्येक श्रृंखला को दें:

विकल्प = {
    टूलटिप: {
        ट्रिगर: 'अक्ष',
        अक्ष पॉइंटर: { प्रकार: 'छाया' }
    },
    संकेतक: {
        डेटा: ['इंजीनियरिंग', 'उत्पाद', 'डिज़ाइन', 'मार्केटिंग']
    },
    xAxis: {
        प्रकार: 'मूल्य'
    },
    yAxis: {
        प्रकार: 'श्रेणी',
        डेटा: ['प्रोजेक्ट अल्फा', 'प्रोजेक्ट बीटा', 'प्रोजेक्ट गामा', 'प्रोजेक्ट डेल्टा']
    },
    श्रृंखला: [
        {
            नाम: 'इंजीनियरिंग',
            प्रकार: 'बार',
            स्टैक: 'आवंटन',
            डेटा: [320, 302, 301, 334]
        },
        {
            नाम: 'उत्पाद',
            प्रकार: 'बार',
            स्टैक: 'आवंटन',
            डेटा: [120, 132, 101, 134]
        },
        {
            नाम: 'डिज़ाइन',
            प्रकार: 'बार',
            स्टैक: 'आवंटन',
            डेटा: [220, 182, 191, 234]
        },
        {
            नाम: 'मार्केटिंग',
            प्रकार: 'बार',
            स्टैक: 'आवंटन',
            डेटा: [150, 212, 201, 154]
        }
    ]
};

 

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

स्टैक्ड क्षैतिज बार को निरपेक्ष आयतन की तुलना के लिए या श्रेणियों के बीच प्रतिशत अनुपात दिखाने के लिए सामान्यीकृत करने के लिए कॉन्फ़िगर किया जा सकता है।

1. 100% सामान्यीकृत क्षैतिज बार चार्ट

लंबे रूप वाली श्रेणियों के बीच निरपेक्ष गिनती के बजाय सापेक्ष अनुपात का मूल्यांकन करने के लिए, अपनी श्रेणी डेटा को प्रति पंक्ति 100% तक योग करने के लिए सामान्यीकृत करें:

विकल्प = {
    सुझाव: {
        ट्रिगर: 'अक्ष',
        अक्ष संकेतक: { प्रकार: 'छाया' },
        प्रारूपक: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
    },
    प्रतीक: {
        डेटा: ['संतुष्ट', 'तटस्थ', 'असंतुष्ट']
    },
    xअक्ष: {
        प्रकार: 'मान',
        न्यूनतम: 0,
        अधिकतम: 100,
        अक्ष लेबल: { प्रारूपक: '{मान}%' }
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: [
            'एंटरप्राइज कस्टमर सफलता',
            'मिड-मार्केट समर्थन सेवाएं',
            'सेल्फ-सर्व ऑनबोर्डिंग'
        ]
    },
    श्रेणी: [
        {
            नाम: 'संतुष्ट',
            प्रकार: 'बार',
            स्टैक: 'प्रतिक्रिया',
            डेटा: [75, 60, 45]
        },
        {
            नाम: 'तटस्थ',
            प्रकार: 'बार',
            स्टैक: 'प्रतिक्रिया',
            डेटा: [18, 25, 35]
        },
        {
            नाम: 'असंतुष्ट',
            प्रकार: 'बार',
            स्टैक: 'प्रतिक्रिया',
            डेटा: [7, 15, 20]
        }
    ]
};

 

लेआउट और स्टाइलिंग को बेहतर बनाना

साफ दृश्य सीमाएं और गोल बाहरी छोर क्षैतिज स्टैक्ड बार को एक पॉलिश किए गए, आधुनिक भाव देते हैं।

1. खंड विभाजन और बाहरी छोर का गोलाकार बनाना

आंतरिक खंडों को अलग करने के लिए पतली ऊर्ध्वाधर सीमा रेखाएं लगाएं, और कोने की त्रिज्या स्टाइलिंग को दाईं ओर अंतिम खंड तक सीमित रखें:

विकल्प = {
    ग्रिड: {
        बाएं: '15%',
        दाएं: '10%',
        लेबल समावेश करें: सच
    },
    xअक्ष: {
        प्रकार: 'मान'
    },
    yअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['Q1 बजट', 'Q2 बजट', 'Q3 बजट', 'Q4 बजट']
    },
    श्रेणी: [
        {
            नाम: 'स्थिर लागतें',
            प्रकार: 'बार',
            स्टैक: 'बजट',
            डेटा: [400, 420, 410, 430],
            आइटम शैली: {
                रंग: '#5470c6',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1
            }
        },
        {
            नाम: 'परिवर्तनशील लागतें',
            प्रकार: 'बार',
            स्टैक: 'बजट',
            डेटा: [200, 250, 220, 280],
            आइटम शैली: {
                रंग: '#91cc75',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1
            }
        },
        {
            नाम: 'विकल्पाधिकारी',
            प्रकार: 'बार',
            स्टैक: 'बजट',
            डेटा: [100, 150, 130, 190],
            आइटम शैली: {
                रंग: '#fac858',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1,
                त्रिज्या: [0, 6, 6, 0] // दाईं ओर अंतिम छोर पर गोल कोने
            }
        }
    ]
};

 

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

  • पहला खंड आधार: एक ऐसा खंड जो y-अक्ष के आधार रेखा के सबसे करीब है, श्रेणियों के बीच तुलना करने के लिए सबसे आसान है। हमेशा अपने सबसे महत्वपूर्ण घटक को पहले श्रेणी वस्तु के रूप में रखें।
  • स्टैक्ड घटकों की सीमा निर्धारित करें: प्रति बार कुल स्टैक्ड खंडों की संख्या को 5 या उससे कम रखें ताकि दृश्य विश्लेषण स्पष्ट रहे बिना दर्शक को अत्यधिक भारित न किया जाए।
  • बार के भीतर पाठ लेबल: चौड़े खंडों वाले क्षैतिज स्टैक्ड बार के लिए, सक्षम करने के लिए विचार करेंलेबल: { दिखाएं: सच, स्थिति: 'अंदर' } इससे विशिष्ट खंड मान पढ़ने योग्य हो जाते हैं, जब तक कि होवर टूलटिप्स पर निर्भर नहीं रहना पड़ता।
Scroll to Top