डोनट चार्ट: रिंग-आधारित अनुपात और केंद्रीय मापदंड

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

डोनट चार्ट की यांत्रिकी

एपाची ईचार्ट्स में, डोनट चार्ट को निर्मित करने के लिए'पाई' श्रृंखला प्रकार के साथ दो तत्वों वालात्रिज्या ऐरे:['आंतरिक त्रिज्या', 'बाहरी त्रिज्या']। पहला मान खाली केंद्रीय खांच को परिभाषित करता है, जबकि दूसरा मान बाहरी सीमा को नियंत्रित करता है।

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

एक मानक डोनट चार्ट बनाने के लिए, एक श्रृंखला की घोषणा करें जिसमेंप्रकार: 'पाई', सेट करेंत्रिज्या: ['50%', '70%'], और अपनी डेटा वस्तुओं को साथ ले जाएंनाम औरमूल्य गुणधर्म:

विकल्प = {
    सुझाव: {
        ट्रिगर: 'आइटम',
        प्रारूपक: '{a} 
{b}: {c} ({d}%)'
    },
    संकेतक: {
        ऊपरी: '5%',
        बाएं: 'केंद्र'
    },
    श्रृंखला: [
        {
            नाम: 'बजट आवंटन',
            प्रकार: 'पाई',
            त्रिज्या: ['50%', '70%'],
            केंद्र: ['50%', '55%'],
            लेबल-ओवरलैप बचाएं: सच,
            लेबल: {
                दिखाएं: गलत
            },
            डेटा: [
                { मूल्य: 1048, नाम: 'इंजीनियरिंग' },
                { मूल्य: 735, नाम: 'मार्केटिंग' },
                { मूल्य: 580, नाम: 'ऑपरेशंस' },
                { मूल्य: 484, नाम: 'सेल्स' },
                { मूल्य: 300, नाम: 'समर्थन' }
            ]
        }
    ]
};

 

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

डोनट चार्ट केंद्रीय सांख्यिकी या गोल दृश्य शैली के साथ जोड़े जाने पर उत्कृष्ट प्रदर्शन करते हैं, जिससे पॉलिश किए गए यूआई घटक बनते हैं।

1. केंद्र लेबल सांख्यिकी ओवरले

डोनट रिंग के भीतर सीधे एक कुल योग या मुख्य केपीआई प्रदर्शित करने के लिए ग्राफिक तत्वों या केंद्रित शीर्षक घटकों का उपयोग करें:

विकल्प = {
    शीर्षक: {
        पाठ: '$3,147',
        उपशीर्षक: 'कुल खर्च',
        बाएं: 'केंद्र',
        ऊपर: '42%',
        शैली: {
            आकार: 28,
            बोल्ड: 'बोल्ड',
            रंग: '#333'
        },
        उपशैली: {
            आकार: 14,
            रंग: '#666'
        }
    },
    सुझाव: {
        उद्दीपन: 'आइटम'
    },
    श्रृंखला: [
        {
            नाम: 'खर्च',
            प्रकार: 'पाई',
            त्रिज्या: ['60%', '80%'],
            केंद्र: ['50%', '50%'],
            लेबल-अतिव्यापन-बचाएं: गलत,
            लेबल: {
                दिखाएं: गलत
            },
            डेटा: [
                { मूल्य: 1048, नाम: 'हार्डवेयर' },
                { मूल्य: 735, नाम: 'एसएएस सब्सक्रिप्शन' },
                { मूल्य: 580, नाम: 'ऑफिस सामग्री' },
                { मूल्य: 484, नाम: 'यात्रा' }
            ]
        }
    ]
};

 

लेआउट और सेगमेंट शैली को समायोजित करना

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

1. गोल छोर और सेगमेंट अंतराल

उपयोग करें आइटम_शैली.सीमा_त्रिज्यास्पष्ट सफेद सीमाओं के साथ, प्रत्येक चाप सेगमेंट को एक नरम, गोल जैसी दिखावट देने के लिए:

विकल्प = {
    श्रृंखला: [
        {
            नाम: 'स्टोरेज उपयोग',
            प्रकार: 'पाई',
            त्रिज्या: ['45%', '70%'],
            आइटम_शैली: {
                सीमा_त्रिज्या: 10,
                सीमा_रंग: '#ffffff',
                सीमा_चौड़ाई: 4
            },
            लेबल: {
                दिखाएं: सच,
                प्रारूपक: '{b}: {d}%'
            },
            डेटा: [
                { मूल्य: 40, नाम: 'दस्तावेज़' },
                { मूल्य: 25, नाम: 'मीडिया फाइलें' },
                { मूल्य: 20, नाम: 'सिस्टम डेटा' },
                { मूल्य: 15, नाम: 'फ्री स्पेस' }
            ]
        }
    ]
};

 

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

  • आंतरिक-से-बाहरी त्रिज्या अनुपात को अनुकूलित करें:आंतरिक त्रिज्या को बाहरी त्रिज्या के 50% से 70% के बीच बनाए रखें ताकि सेगमेंट मोटे रहें ताकि आसानी से होवर किया जा सके, जबकि केंद्र में पर्याप्त स्थान बना रहे।
  • केंद्रीय स्थान का जानबूझकर उपयोग करें:चार्ट के परिधि को अतिरिक्त टेक्स्ट बॉक्स से भरने के बजाय, केंद्रीय खाली स्थान का उपयोग कुल या चयनित सेगमेंट मापदंड को दिखाने के लिए करें।
  • सेगमेंट की संख्या सीमित रखें:छल्ले को 5 या 6 प्राथमिक सेगमेंट तक सीमित रखें। यदि आपके पास बहुत सारी छोटी श्रेणियां हैं, तो उन्हें एक ‘अन्य’ श्रेणी में संयोजित करें ताकि पतले, पढ़ने योग्य न होने वाले चाप न बनें।
Scroll to Top