एक स्थिर कुल के सापेक्ष अनुपात या प्रतिशत हिस्सेदारी प्रस्तुत करते समय, यह पाई चार्ट एक परिचित और स्पष्ट विकल्प है। एक वृत्त को आनुपातिक टुकड़ों में विभाजित करके, पाई चार्ट दर्शकों को तेजी से समझने में सक्षम बनाते हैं कि व्यक्तिगत घटक एक एकीकृत समग्र में कैसे योगदान देते हैं, जैसे बाजार हिस्सेदारी वितरण, उपकरण प्राथमिकता विभाजन, या खर्च की श्रेणी आवंटन।
पाई चार्ट की यांत्रिकता
कार्टेशियन चार्ट के विपरीत जो क्षैतिज और ऊर्ध्वाधर अक्षों का उपयोग करते हैं, पाई चार्ट वर्गीकृत डेटा को ध्रुवीय निर्देशांक प्रणाली पर त्रिज्यीय कोणों पर सीधे मैप करते हैं। एपाची ईचार्ट्स में, एक पाई चार्ट को सीरीज़ के प्रकार को 'पाई' और एक ऐरे ऑब्जेक्ट प्रदान करना जहां प्रत्येक प्रविष्टि में एक संख्यात्मक मूल्य और वर्णनात्मक नाम.
1. आवश्यक सेटअप
एक मूल पाई चार्ट बनाने के लिए, एक एकल श्रृंखला को परिभाषित करें जिसमें प्रकार: 'पाई' और अपने संरचित डेटासेट को डेटा ऐरे में पास करें:
विकल्प = {
टूलटिप: {
ट्रिगर: 'आइटम',
फॉर्मेटर: '{a}
{b}: {c} ({d}%)'
},
लेजेंड: {
ओरिएंट: 'लंबवत',
बाएं: 'बाएं'
},
श्रृंखला: [
{
नाम: 'एक्सेस स्रोत',
प्रकार: 'पाई',
त्रिज्या: '60%',
डेटा: [
{ मूल्य: 1048, नाम: 'खोज इंजन' },
{ मूल्य: 735, नाम: 'सीधा' },
{ मूल्य: 580, नाम: 'ईमेल' },
{ मूल्य: 484, नाम: 'यूनियन विज्ञापन' },
{ मूल्य: 300, नाम: 'वीडियो विज्ञापन' }
],
उत्कृष्टता: {
आइटम शैली: {
छाया ब्लर: 10,
छाया ऑफसेट एक्स: 0,
छाया रंग: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
उन्नत संरचनात्मक तकनीकें
पाई चार्ट को रिंग आकार के डोनट लेआउट में समायोजित किया जा सकता है या कस्टम त्रिज्या के साथ स्टाइल किया जा सकता है ताकि प्राथमिक डेटा खंडों को बल दिया जा सके।
1. डोनट चार्ट वेरिएंट
सेट करना त्रिज्या गुणवत्ता दो-मान वाले ऐरे के रूप में (उदाहरण के लिए, ['40%', '70%']) केंद्र को खाली कर देता है ताकि साफ डोनट चार्ट बन सके। इससे बीच में कस्टम सारांश लेबल के लिए जगह बचती है:
विकल्प = {
सुझाव: {
ट्रिगर: 'आइटम'
},
संकेतक: {
ऊपरी: '5%',
बाएं: 'केंद्र'
},
श्रृंखला: [
{
नाम: 'डिवाइस प्रकार',
प्रकार: 'पाई',
त्रिज्या: ['40%', '70%'],
लेबल-ओवरलैप बचाएं: सच,
आइटम-शैली: {
कोने का वक्र: 8,
किनारे का रंग: '#fff',
किनारे की चौड़ाई: 2
},
लेबल: {
दिखाएं: गलत,
स्थिति: 'केंद्र'
},
उत्कृष्टता: {
लेबल: {
दिखाएं: सच,
फॉन्ट-आकार: 20,
मोटाई: 'बोल्ड'
}
},
डेटा: [
{ मूल्य: 1048, नाम: 'डेस्कटॉप' },
{ मूल्य: 735, नाम: 'मोबाइल' },
{ मूल्य: 580, नाम: 'टैबलेट' },
{ मूल्य: 484, नाम: 'अन्य' }
]
}
]
};
लेआउट और शैली को सुगठित करना
लेबल कॉलआउट लाइनों और स्लाइस किनारों को नियंत्रित करने से पाई चार्ट्स को छोटे डेटा मानों के साथ भी पढ़ने में आसानी होती है।
1. कस्टम स्लाइस अलगाव और लेबल कॉलआउट
आइटम किनारे की चौड़ाई लगाना और बाहरी गाइड लाइनों को कॉन्फ़िगर करने से पड़ोसी स्लाइसों पर टेक्स्ट के ओवरलैप होने से बचा जा सकता है:
विकल्प = {
श्रृंखला: [
{
नाम: 'बाजार हिस्सेदारी',
प्रकार: 'पाई',
त्रिज्या: '65%',
केंद्र: ['50%', '50%'],
चयनित-मोड: 'एकल',
डेटा: [
{ मूल्य: 40, नाम: 'ब्रांड ए' },
{ मूल्य: 30, नाम: 'ब्रांड बी' },
{ मूल्य: 15, नाम: 'ब्रांड सी' },
{ मूल्य: 10, नाम: 'ब्रांड डी' },
{ मूल्य: 5, नाम: 'अन्य' }
],
लेबल: {
प्रारूपक: '{b}: {d}%'
},
लेबल-रेखा: {
चिकनाई: 0.2,
लंबाई: 10,
लंबाई2: 20
},
आइटम-शैली: {
किनारे का रंग: '#ffffff',
किनारे की चौड़ाई: 2
}
}
]
};
रणनीतिक बेस्ट प्रैक्टिसेज
- स्लाइस की संख्या 5 या 6 तक सीमित रखें: बहुत सारे छोटे स्लाइस पाई चार्ट को पढ़ने में कठिन बना देते हैं। छोटे मूल्यों को ‘अन्य’ श्रेणी के तहत समूहित करें ताकि फोकस तेज रहे।
- आकार के अनुसार स्लाइस को क्रमबद्ध करें: सबसे बड़े सेगमेंट को 12 बजे से शुरू करें और शेष स्लाइस को घड़ी की दिशा में क्रमिक रूप से व्यवस्थित करें ताकि आसानी से स्कैन किया जा सके।
- टूलटिप्स या लेबल में सीधे प्रतिशत दिखाएं: हमेशा शामिल करें
{d}%लेबल या टूलटिप फॉर्मेटर में ताकि दर्शक तुरंत अनुपात देख सकें बिना मानसिक गणना किए।