स्टैक्ड कॉलम चार्ट: भाग-से-पूर्ण रचना

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

स्टैक्ड कॉलम की यांत्रिकता

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

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

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

विकल्प = {
    सुझाव: {
        ट्रिगर: 'अक्ष',
        अक्ष संकेतक: { प्रकार: 'छाया' }
    },
    संकेतक: {
        डेटा: ['सीधा', 'ऑर्गेनिक सर्च', 'भुगतान वाले विज्ञापन', 'रेफरल']
    },
    Xअक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि', 'रवि']
    },
    Yअक्ष: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            नाम: 'सीधा',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            नाम: 'ऑर्गेनिक सर्च',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            नाम: 'भुगतान वाले विज्ञापन',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            नाम: 'रेफरल',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [98, 77, 101, 99, 40, 120, 110]
        }
    ]
};

 

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

स्टैक्ड कॉलम चार्ट को आपकी विश्लेषणात्मक आवश्यकताओं के आधार पर प्रतिशत वितरण या चयनात्मक उप-समूहन दिखाने के लिए अनुकूलित किया जा सकता है।

1. 100% सामान्यीकृत स्टैक्ड कॉलम

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

विकल्प = {
    सुझाव: {
        ट्रिगर: 'अक्ष',
        अक्ष संकेतक: { प्रकार: 'छाया' },
        प्रारूपक: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
    },
    स्पष्टीकरण: {
        डेटा: ['डेस्कटॉप', 'मोबाइल', 'टैबलेट']
    },
    एक्स-अक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    वाई-अक्ष: {
        प्रकार: 'मान',
        न्यूनतम: 0,
        अधिकतम: 100,
        अक्ष लेबल: { प्रारूपक: '{मान}%' }
    },
    श्रृंखला: [
        {
            नाम: 'डेस्कटॉप',
            प्रकार: 'बार',
            स्टैक: 'प्रतिशत',
            डेटा: [60, 50, 45, 40]
        },
        {
            नाम: 'मोबाइल',
            प्रकार: 'बार',
            स्टैक: 'प्रतिशत',
            डेटा: [30, 40, 45, 50]
        },
        {
            नाम: 'टैबलेट',
            प्रकार: 'बार',
            स्टैक: 'प्रतिशत',
            डेटा: [10, 10, 10, 10]
        }
    ]
};

 

2. बहु-स्टैक समूहन

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

विकल्प = {
    स्पष्टीकरण: {
        डेटा: ['उत्पाद A वास्तविक', 'उत्पाद B वास्तविक', 'उत्पाद A लक्ष्य', 'उत्पाद B लक्ष्य']
    },
    एक्स-अक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    वाई-अक्ष: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            नाम: 'उत्पाद A वास्तविक',
            प्रकार: 'बार',
            स्टैक: 'वास्तविक',
            डेटा: [120, 150, 180, 200]
        },
        {
            नाम: 'उत्पाद B वास्तविक',
            प्रकार: 'बार',
            स्टैक: 'वास्तविक',
            डेटा: [80, 90, 100, 110]
        },
        {
            नाम: 'उत्पाद A लक्ष्य',
            प्रकार: 'बार',
            स्टैक: 'लक्ष्य',
            डेटा: [130, 160, 190, 210]
        },
        {
            नाम: 'उत्पाद B लक्ष्य',
            प्रकार: 'बार',
            स्टैक: 'लक्ष्य',
            डेटा: [90, 100, 110, 120]
        }
    ]
};

 

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

स्टैक किए गए कॉलम के लिए दृश्य चमक आवश्यक है ताकि खंडों को अलग-अलग रखा जा सके बिना दृश्य थकान पैदा किए बिना।

1. खंड सीमाएं और गोल शीर्ष कैप

स्टैक किए गए खंडों के बीच स्पष्ट सीमा बनाएं और कोनों के गोलाकार करने को स्टैक में सबसे ऊपरी श्रृंखला खंड तक सीमित रखें:

विकल्प = {
    एक्स-अक्ष: {
        प्रकार: 'श्रेणी',
        डेटा: ['जनवरी', 'फरवरी', 'मार्च', 'अप्रैल']
    },
    वाई-अक्ष: {
        प्रकार: 'मान'
    },
    श्रृंखला: [
        {
            नाम: 'बेस लेयर',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [320, 302, 301, 334],
            आइटम शैली: {
                रंग: '#4992ff',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1
            }
        },
        {
            नाम: 'मध्य लेयर',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [120, 132, 101, 134],
            आइटम शैली: {
                रंग: '#7cffb2',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1
            }
        },
        {
            नाम: 'शीर्ष लेयर',
            प्रकार: 'बार',
            स्टैक: 'कुल',
            डेटा: [220, 182, 191, 234],
            आइटम शैली: {
                रंग: '#fddd60',
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 1,
                गोलाकार कोने: [4, 4, 0, 0] // केवल शीर्ष खंड पर गोल कोने
            }
        }
    ]
};

 

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

  • खंड संख्या सीमित करें:प्रति कॉलम 4 से 5 श्रेणियों से अधिक स्टैक करने से बचें। इस सीमा के बाद, कॉलम के बीच मध्य खंडों की तुलना दृश्य रूप से कठिन हो जाती है।
  • आधार रेखा आइटम को नीचे तय करें:अपने सबसे महत्वपूर्ण मापदंड या सबसे बड़े उप-घटक को श्रृंखलासरणी में पहले आइटम के रूप में रखें ताकि यह आधार रेखा पर सीधे आराम से संरेखित हो सके।
  • उच्च विपरीत रंग पैलेट या सीमाओं का उपयोग करें:पड़ोसी रंगों के समान विपरीत स्तर होने पर खंडों के बीच सूक्ष्म सफेद सीमा रेखाएं लगाकर स्पष्ट अंतर बनाए रखें।
Scroll to Top