सनबर्स्ट चार्ट: रेडियल हायरार्की और मल्टी-लेवल रिंग ब्रेक्स

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

सनबर्स्ट चार्ट की यांत्रिकता

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

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

एक मूल सनबर्स्ट चार्ट बनाने के लिए, एक नेस्टेड ट्री डेटासेट प्रदान करें और अपनी श्रृंखला ऑब्जेक्ट में सेट करेंप्रकार: 'सनबर्स्ट'अपनी श्रृंखला ऑब्जेक्ट के भीतर:

विकल्प = {
    टूलटिप: {
        ट्रिगर: 'आइटम',
        फॉर्मेटर: '{b}: {c}'
    },
    श्रृंखला: [
        {
            प्रकार: 'सनबर्स्ट',
            डेटा: [
                {
                    नाम: 'ग्रैंडपेरेंट',
                    बच्चे: [
                        {
                            नाम: 'पेरेंट 1',
                            मूल्य: 15,
                            बच्चे: [
                                { नाम: 'चाइल्ड 1', मूल्य: 5 },
                                { नाम: 'चाइल्ड 2', मूल्य: 10 }
                            ]
                        },
                        {
                            नाम: 'पेरेंट 2',
                            मूल्य: 10,
                            बच्चे: [
                                { नाम: 'चाइल्ड 3', मूल्य: 10 }
                            ]
                        }
                    ]
                }
            ],
            त्रिज्या: [0, '90%'],
            लेबल: {
                घूमाएं: 'रेडियल'
            }
        }
    ]
};

 

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

सनबर्स्ट चार्ट को रिंग-स्तरीय स्टाइलिंग नियमों, रंग विरासत और क्लिक-टू-जूम इंटरैक्टिव ड्रिल-डाउन के साथ कस्टमाइज किया जा सकता है।

1. स्तर-विशिष्ट रिंग कस्टमाइजेशन और ड्रिल-डाउन

का उपयोग करेंस्तरऐरे का उपयोग करके केंद्र से बाहर तक प्रत्येक संकेंद्रित रिंग परत के लिए अलग-अलग त्रिज्या, लेबल व्यवहार और आइटम शैली को परिभाषित करें:

विकल्प = {
    सुझाव: {
        ट्रिगर: 'आइटम'
    },
    स्पष्टीकरण: {
        ऊपरी: '2%',
        बाएं: 'केंद्र',
        डेटा: ['इलेक्ट्रॉनिक्स', 'घर और जीवन']
    },
    श्रेणी: [
        {
            प्रकार: 'सनब्रस्ट',
            केंद्र: ['50%', '55%'],
            त्रिज्या: ['10%', '85%'],
            नोड क्लिक: 'रूटटूनोड', // नोड पर क्लिक करने पर ड्रिल-डाउन सक्षम करता है
            स्तर: [
                {},
                {
                    // आंतरिक वलय (शीर्ष स्तर की श्रेणियां)
                    r0: '15%',
                    r: '40%',
                    लेबल: { घूर्णन: 0, मोटाई: 'बोल्ड' },
                    आइटम शैली: { बॉर्डर चौड़ाई: 2 }
                },
                {
                    // मध्य वलय (उप-श्रेणियां)
                    r0: '40%',
                    r: '65%',
                    लेबल: { घूर्णन: 'स्पर्शरेखा', आकार: 11 }
                },
                {
                    // बाहरी वलय (पत्ती उत्पाद)
                    r0: '65%',
                    r: '85%',
                    लेबल: { घूर्णन: 'त्रिज्या', आकार: 10 }
                }
            ],
            डेटा: [
                {
                    नाम: 'इलेक्ट्रॉनिक्स',
                    बच्चे: [
                        {
                            नाम: 'ऑडियो',
                            बच्चे: [
                                { नाम: 'हेडफोन', मूल्य: 40 },
                                { नाम: 'स्पीकर', मूल्य: 25 }
                            ]
                        },
                        {
                            नाम: 'कंप्यूटर',
                            बच्चे: [
                                { नाम: 'लैपटॉप', मूल्य: 80 },
                                { नाम: 'डेस्कटॉप', मूल्य: 35 }
                            ]
                        }
                    ]
                },
                {
                    नाम: 'घर और जीवन',
                    बच्चे: [
                        {
                            नाम: 'फर्नीचर',
                            बच्चे: [
                                { नाम: 'सीटें', मूल्य: 50 },
                                { नाम: 'टेबल', मूल्य: 30 }
                            ]
                        },
                        {
                            नाम: 'सजावट',
                            बच्चे: [
                                { नाम: 'प्रकाश', मूल्य: 45 },
                                { नाम: 'रग', मूल्य: 20 }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
};

 

लेआउट और लेबल संरेखण का सूक्ष्म समायोजन

लेबल घूर्णन मोड को नियंत्रित करना (त्रिज्या बनाम स्पर्शरेखा) ताकि त्रिज्या के बाहरी वलय की ओर संकरे होते जाने पर भी पाठ पढ़ने योग्य बना रहे।

1. कस्टम सेक्टर अलगाव और त्रिज्या लेबल

आइटम सीमाओं को लागू करें और सेट करें घूर्णन: 'त्रिज्या'ताकि पाठ को सेक्टर त्रिज्या के साथ सुंदर ढंग से संरेखित किया जा सके:

विकल्प = {
    श्रेणी: [
        {
            प्रकार: 'सनब्रस्ट',
            त्रिज्या: ['20%', '90%'],
            आइटम शैली: {
                त्रिज्या: 4,
                सीमा रंग: '#ffffff',
                सीमा चौड़ाई: 2
            },
            लेबल: {
                दिखाएं: सच,
                घूर्णन: 'त्रिज्या',
                संरेखण: 'दाएं'
            },
            डेटा: [
                {
                    नाम: 'सॉफ्टवेयर',
                    आइटम शैली: { रंग: '#5470c6' },
                    बच्चे: [
                        { नाम: 'SaaS', मूल्य: 120 },
                        { नाम: 'ऑन-प्रेम', मूल्य: 60 }
                    ]
                },
                {
                    नाम: 'हार्डवेयर',
                    आइटम शैली: { रंग: '#91cc75' },
                    बच्चे: [
                        { नाम: 'सर्वर', मूल्य: 90 },
                        { नाम: 'नेटवर्किंग', मूल्य: 110 }
                    ]
                },
                {
                    नाम: 'सेवाएं',
                    आइटम शैली: { रंग: '#fac858' },
                    बच्चे: [
                        { नाम: 'परामर्श', मूल्य: 70 },
                        { नाम: 'समर्थन', मूल्य: 50 }
                    ]
                }
            ]
        }
    ]
};

 

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

  • लेबल घूर्णन को वलय गहराई के अनुरूप बनाएं: क्षैतिज का उपयोग करें (घूर्णन: 0) या स्पर्शरेखा लेबल का उपयोग चौड़े आंतरिक वलय के लिए करें, और तंग बाहरी सेक्टर के लिए स्विच करें त्रिज्यातंग बाहरी सेक्टर के लिए लेबल।
  • सक्षम करें नोड क्लिक: 'रूटटूनोड':इंटरैक्टिव जूम उपयोगकर्ताओं को किसी भी मातृ चाप पर क्लिक करके बिना दृश्य अव्यवस्था के सीधे उसके उप-वृक्ष पर ध्यान केंद्रित करने की अनुमति देता है।
  • रंग विरासत का उपयोग करें:बच्चे के सेक्टर को अपने मातृ नोड से मूल रंग विरासत में प्राप्त करने की अनुमति दें, जिसमें उजाले/संतृप्ति के विभिन्न स्तर हों, ताकि स्तरों के बीच स्पष्ट दृश्य समूहन बना रहे।
Scroll to Top