जब आपको समय के साथ कुल कुल आयतन और व्यक्तिगत उप-घटक योगदान दोनों को ट्रैक करने की आवश्यकता होती है, तो यह स्टैक्ड एरिया चार्ट आदर्श विज़ुअलाइज़ेशन उपकरण है। ऊर्ध्वाधर रूप से एरिया भरने से एक निरंतर संयुक्त दृश्य बनता है, जहां शीर्ष रेखा संयुक्त कुल का प्रतिनिधित्व करती है, जबकि व्यक्तिगत बैंड की चौड़ाई बदलती उप-श्रेणी योगदान दिखाती है, जैसे कि कई महीनों में खोज इंजन, ऑर्गेनिक और सीधे रेफरल चैनलों द्वारा विभाजित कुल वेब ट्रैफिक।
स्टैक्ड एरिया चार्ट की यांत्रिकी
स्टैक्ड एरिया चार्ट लाइन श्रृंखला विन्यासों को मेल खाते हुए स्टैक विशेषताओं के साथ मिलाते हैं। जब रेंडरिंग इंजन एक ही स्टैक पहचानकर्ता कई श्रृंखलाओं में पाता है जहां प्रकार: 'लाइन' और एरिया स्टाइल सक्रिय हों, तो यह प्रत्येक डेटा बिंदु को ऊर्ध्वाधर 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]
},
{
नाम: 'सीधा',
प्रकार: 'लाइन',
स्टैक: 'कुल',
क्षेत्र शैली: {},
डेटा: [320, 332, 301, 334, 390, 330, 320]
}
]
}; 
उन्नत संरचनात्मक तकनीकें
स्टैक्ड एरिया चार्ट को समय के साथ कुल संचयी वृद्धि या सापेक्ष अनुपातिक परिवर्तनों पर ध्यान केंद्रित करने के लिए कॉन्फ़िगर किया जा सकता है।
1. 100% सामान्यीकृत प्रतिशत एरिया चार्ट
समय के साथ कुल संचयी आयतन के बजाय अनुपातिक परिवर्तनों के मूल्यांकन करते समय, अपने डेटासेट को प्रत्येक क्षैतिज समय बिंदु पर 100% तक सामान्यीकृत करें:
विकल्प = {
सुझाव: {
ट्रिगर: 'अक्ष',
प्रारूपक: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
संकेतक: {
डेटा: ['डेस्कटॉप', 'मोबाइल', 'टैबलेट']
},
xअक्ष: {
प्रकार: 'श्रेणी',
सीमा अंतराल: गलत,
डेटा: ['2023', '2024', '2025', '2026']
},
yअक्ष: {
प्रकार: 'मान',
न्यूनतम: 0,
अधिकतम: 100,
अक्ष लेबल: { प्रारूपक: '{मान}%' }
},
श्रृंखला: [
{
नाम: 'डेस्कटॉप',
प्रकार: 'रेखा',
स्टैक: 'प्रतिशत',
चिकनाहट: सच,
क्षेत्र शैली: {},
डेटा: [65, 55, 48, 40]
},
{
नाम: 'मोबाइल',
प्रकार: 'रेखा',
स्टैक: 'प्रतिशत',
चिकनाहट: सच,
क्षेत्र शैली: {},
डेटा: [25, 35, 42, 50]
},
{
नाम: 'टैबलेट',
प्रकार: 'रेखा',
स्टैक: 'प्रतिशत',
चिकनाहट: सच,
क्षेत्र शैली: {},
डेटा: [10, 10, 10, 10]
}
]
}; 
लेआउट और शैली को समायोजित करना
क्योंकि स्टैक किए गए क्षेत्र पूरी तरह से पृष्ठभूमि को ढक लेते हैं, भराव के पारदर्शिता और रेखा के बोल्ड लाइन स्ट्रोक को समायोजित करने से अलग-अलग परतों को स्पष्ट और पढ़ने योग्य बनाए रखने में मदद मिलती है।
1. कस्टम परत की पारदर्शिता और सीमा अलग करने वाले
थोड़ी पारदर्शी क्षेत्र भराव के ऊपर ठोस रेखा स्ट्रोक सेट करने से पड़ोसी स्टैक किए गए बैंड के बीच स्पष्ट दृश्य सीमाएं बनती हैं:
विकल्प = {
सुझाव: {
ट्रिगर: 'अक्ष'
},
xअक्ष: {
प्रकार: 'श्रेणी',
सीमा अंतराल: गलत,
डेटा: ['Q1', 'Q2', 'Q3', 'Q4']
},
yअक्ष: {
प्रकार: 'मान'
},
श्रृंखला: [
{
नाम: 'उत्पाद ए',
प्रकार: 'रेखा',
स्टैक: 'आयतन',
चिकनाहट: सच,
रेखा शैली: { चौड़ाई: 2, रंग: '#5470c6' },
क्षेत्र शैली: { रंग: '#5470c6', पारदर्शिता: 0.7 },
डेटा: [120, 150, 180, 210]
},
{
नाम: 'उत्पाद बी',
प्रकार: 'रेखा',
स्टैक: 'आयतन',
चिकनाहट: सच,
रेखा शैली: { चौड़ाई: 2, रंग: '#91cc75' },
क्षेत्र शैली: { रंग: '#91cc75', पारदर्शिता: 0.7 },
डेटा: [220, 280, 250, 310]
},
{
नाम: 'उत्पाद सी',
प्रकार: 'रेखा',
स्टैक: 'आयतन',
चिकनाहट: सच,
रेखा शैली: { चौड़ाई: 2, रंग: '#fac858' },
क्षेत्र शैली: { रंग: '#fac858', पारदर्शिता: 0.7 },
डेटा: [150, 190, 220, 260]
}
]
}; 
रणनीतिक बेस्ट प्रैक्टिसेज
- स्थिर श्रृंखला को नीचे तय करें:स्टैक के नीचे सबसे बड़ी या कम अस्थिर श्रृंखला रखें ताकि ऊपर वाली पट्टियों के लिए एक भविष्यवादी आधार बनाया जा सके।
- बैंड की संख्या सीमित करें:4 से 5 से अधिक श्रृंखलाओं को स्टैक करने से मध्य बैंड का सटीक मूल्यांकन करना मुश्किल हो जाता है। छोटी श्रेणियों को ‘अन्य’ श्रेणी में समूहित करने के बारे में सोचें।
- उपयोग करें
अक्ष संकेतक: { प्रकार: 'क्रॉस' }:होवर क्रॉसहेयर्स को लगातार सुझाव के साथ मिलाने से घने ऊर्ध्वाधर स्टैक में विशिष्ट तारीख मानों को निर्धारित करना आसान हो जाता है।