लंबे श्रेणी नामों के बीच गौण मापदंडों की तुलना करने के लिए सर्वोत्तम तरीका हैसमूहित बार चार्ट. यह व्यवस्था यदि संबंधित क्षैतिज बारों को Y-अक्ष के साथ-साथ एक-दूसरे के पास रखती है, तो यह उपयोगकर्ताओं को अधिकाधिक श्रेणियों के बीच प्रदर्शन मापदंडों को स्कैन करने में सक्षम बनाती है बिना लेबल पढ़ने में कठिनाई के। यह बहु-वर्षीय बजट विभाजन, उत्पाद विशेषताओं की तुलना या बहु-क्षेत्रीय बिक्री आधार के लिए एक प्रभावी विकल्प है जहां श्रेणी लेबलों को अधिक क्षैतिज स्थान की आवश्यकता होती है।
समूहित क्षैतिज बार के यांत्रिकी
ऊर्ध्वाधर स्तंभ समूहों की तरह, क्षैतिज बार समूहों को Y-अक्ष पर समान श्रेणीगत लेबल निर्दिष्ट करके बनाया जाता है, जबकि बहुत सी श्रृंखलाओं को निर्दिष्ट किया जाता हैप्रकार: 'बार'. रेंडरिंग इंजन दृश्य समूहन को स्वचालित रूप से संभालता है, जिसमें प्रत्येक श्रृंखला को श्रेणी ब्लॉक के भीतर ऊर्ध्वाधर तल में विस्थापित किया जाता है।
1. आवश्यक सेटअप
समूहित बार चार्ट बनाने के लिए, अपनी अलग-अलग श्रेणियों को निर्दिष्ट करेंyAxis.data, एक संख्यात्मकxAxis, और बहुत सी बार श्रृंखलाएं शामिल करें:
विकल्प = {
सुझाव: {
ट्रिगर: 'अक्ष',
अक्ष संकेतक: { प्रकार: 'छाया' }
},
संकेतक: {
डेटा: ['2025 आवंटित', '2026 आवंटित']
},
xAxis: {
प्रकार: 'मान'
},
yAxis: {
प्रकार: 'श्रेणी',
डेटा: ['अनुसंधान एवं विकास', 'विपणन एवं बिक्री', 'ग्राहक समर्थन', 'संचालन']
},
श्रृंखला: [
{
नाम: '2025 आवंटित',
प्रकार: 'बार',
डेटा: [320, 450, 210, 380]
},
{
नाम: '2026 आवंटित',
प्रकार: 'बार',
डेटा: [380, 490, 240, 410]
}
]
};
उन्नत संरचनात्मक तकनीकें
आपके चार्ट को तीन या अधिक श्रृंखलाओं तक बढ़ाने से गहन दृष्टिकोण मिलते हैं, बशर्ते दृश्य घनत्व पढ़ने में आसान बना रहे।
1. कस्टम रंग ढलान के साथ बहु-मापदंड शैली
अलग-अलग समूहों को पढ़ने योग्य बनाए रखने के लिए क्षैतिज श्रृंखलाओं के बीच अद्वितीय रंग पैलेट या हल्की ढलान भराव लागू करें:
विकल्प = {
संकेतक: {
डेटा: ['Q1 बिक्री', 'Q2 बिक्री', 'Q3 बिक्री']
},
xAxis: {
प्रकार: 'मान'
},
yAxis: {
प्रकार: 'श्रेणी',
डेटा: ['उत्तरी क्षेत्र', 'दक्षिणी क्षेत्र', 'पूर्वी क्षेत्र', 'पश्चिमी क्षेत्र']
},
श्रृंखला: [
{
नाम: 'Q1 बिक्री',
प्रकार: 'बार',
डेटा: [120, 200, 150, 80],
आइटम शैली: {
रंग: '#5470c6',
बॉर्डर राउंडेडनेस: [0, 4, 4, 0]
}
},
{
नाम: 'Q2 बिक्री',
प्रकार: 'बार',
डेटा: [140, 220, 170, 95],
आइटम शैली: {
रंग: '#91cc75',
बॉर्डर राउंडेडनेस: [0, 4, 4, 0]
}
},
{
नाम: 'Q3 बिक्री',
प्रकार: 'बार',
डेटा: [180, 250, 190, 110],
आइटम शैली: {
रंग: '#fac858',
बॉर्डर राउंडेडनेस: [0, 4, 4, 0]
}
}
]
};
लेआउट और अंतराल का सूक्ष्म समायोजन
ऊर्ध्वाधर Y-अक्ष के साथ बार के अंतराल का प्रबंधन करना श्रेणी ब्लॉकों के बीच स्पष्ट अलगाव बनाए रखने के लिए महत्वपूर्ण है।
1. ऊर्ध्वाधर आंतरिक अंतराल और श्रेणी सीमाएं
श्रृंखला बारों को पड़ोसी श्रेणी समूहों में मिलने से बचाते हुए समूहित रूप से रखने के लिए अंतराल विशेषताओं को समायोजित करें:
विकल्प = {
ग्रिड: {
बाएं: '20%',
दाएं: '10%',
लेबल समावेश करें: सच
},
संकेतक: {
डेटा: ['आधार', 'अनुकूलित']
},
xअक्ष: {
प्रकार: 'मान'
},
yअक्ष: {
प्रकार: 'श्रेणी',
डेटा: ['एपीआई प्रतिक्रिया समय', 'डेटाबेस क्वेरी अवधि', 'संपत्ति लोड समय']
},
श्रृंखला: [
{
नाम: 'आधार',
प्रकार: 'बार',
बार अंतराल: '15%', // समान श्रेणी के भीतर बार के बीच अंतराल
श्रेणी अंतराल: '40%', // श्रेणी ब्लॉक्स के बीच अंतराल
डेटा: [350, 180, 520]
},
{
नाम: 'अनुकूलित',
प्रकार: 'बार',
डेटा: [120, 65, 210]
}
]
};
रणनीतिक श्रेष्ठ प्रथाएँ
- समूहों को एकाग्र रखें: प्रति श्रेणी अधिकतम 3 या 4 श्रृंखलाओं तक सीमित रहें। इससे अधिक, ऊर्ध्वाधर दृश्य अव्यवस्था से बचने के लिए स्टैक्ड या बहु-पैनल चार्ट बेहतर उपयुक्त हैं।
- पर्याप्त वर्टिकल अक्ष के अंतराल आवंटित करें: समूहित क्षैतिज चार्ट को महत्वपूर्ण ऊर्ध्वाधर ऊंचाई लेते हैं। कंटेनर की ऊंचाई बढ़ाएं या समायोजित करें
ग्रिड.बाएंपाठ के कटाव को रोकने के लिए। - संगत मापदंड क्रम: सुनिश्चित करें कि आपके कोड में श्रृंखला का क्रम आपके वर्णन के प्राकृतिक प्रवाह के अनुरूप हो (उदाहरण के लिए, पहले ऐतिहासिक वर्ष, फिर वर्तमान वर्ष)।