जब निरंतर स्थानांतरण, संसाधन वितरण, या बहु-चरण उपयोगकर्ता यात्राओं का अनुसरण कर रहे हों, तोसैंकी चार्ट प्रमुख दृश्यीकरण उपकरण है। क्रमिक चरण नोड्स के बीच आनुपातिक प्रवाह बैंड खींचकर, सैंकी चार्ट दर्शाते हैंकि कुल मात्राएँ कैसे विभाजित, संयोजित और जटिल प्रणालियों में संक्रमण करती हैं—जैसे वेबसाइट उपयोगकर्ता रूपांतरण फंनेल, ऊर्जा वितरण नेटवर्क, या संगठनात्मक बजट आवंटन।
सैंकी चार्ट की यांत्रिकता
एपाची ईचार्ट्स में, सैंकी चार्ट का उपयोग करते हैंप्रकार: 'सैंकी'। ग्राफ चार्ट के समान, एक सैंकी आरेख अलग-अलगनोड्स (याडेटा) और दिशात्मकलिंक्स (याकिनारे)। प्रत्येक लिंक में एकस्रोत नोड का नाम, एकलक्ष्य नोड का नाम, और एक संख्यात्मकमूल्यजो जुड़े हुए प्रवाह रेखा की दृश्य चौड़ाई निर्धारित करता है।
1. आवश्यक सेटअप
एक मूल सैंकी चार्ट बनाने के लिए, अपने नोड आइटम को अंदर घोषित करेंडेटा और निर्देशित प्रवाह आयतन को निर्धारित करेंलिंक्स:
विकल्प = {
सुझाव: {
ट्रिगर: 'आइटम',
ट्रिगरऑन: 'माउसमूव'
},
श्रृंखला: [
{
प्रकार: 'सैंकी',
डेटा: [
{ नाम: 'कुल आय' },
{ नाम: 'उत्पाद बिक्री' },
{ नाम: 'सेवाएं' },
{ नाम: 'प्रमोशन' },
{ नाम: 'आर एंड डी' },
{ नाम: 'लाभ' }
],
लिंक: [
{ स्रोत: 'कुल आय', लक्ष्य: 'उत्पाद बिक्री', मूल्य: 70 },
{ स्रोत: 'कुल आय', लक्ष्य: 'सेवाएं', मूल्य: 30 },
{ स्रोत: 'उत्पाद बिक्री', लक्ष्य: 'प्रमोशन', मूल्य: 30 },
{ स्रोत: 'उत्पाद बिक्री', लक्ष्य: 'आर एंड डी', मूल्य: 25 },
{ स्रोत: 'उत्पाद बिक्री', लक्ष्य: 'लाभ', मूल्य: 15 },
{ स्रोत: 'सेवाएं', लक्ष्य: 'लाभ', मूल्य: 30 }
],
उपासना: {
फोकस: 'पड़ोसिता'
},
रेखा शैली: {
रंग: 'धारा',
वक्रता: 0.5
}
}
]
};
उन्नत संरचनात्मक तकनीकें
सैंकी चार्ट्स को ऊर्ध्वाधर प्रवाह दिशाओं, बहु-स्तरीय नोड रंगों और गतिशील लिंक हाइलाइटिंग के साथ कस्टमाइज़ किया जा सकता है ताकि जटिल नेटवर्कों में व्यक्तिगत मार्गों का पता लगाया जा सके।
1. ऊर्ध्वाधर प्रवाह दिशा
सेट करें दिशा: 'ऊर्ध्वाधर'क्षैतिज चरण प्रवाह को शीर्ष से तल तक ऊर्ध्वाधर जलप्रपात दृश्य में बदलने के लिए:
विकल्प = {
सुझाव: {
ट्रिगर: 'आइटम',
ट्रिगरऑन: 'माउसमूव'
},
श्रृंखला: [
{
प्रकार: 'सैंकी',
दिशा: 'ऊर्ध्वाधर',
नोड चौड़ाई: 20,
नोड अंतराल: 16,
डेटा: [
{ नाम: 'वेबसाइट देखने' },
{ नाम: 'उत्पाद पृष्ठ' },
{ नाम: 'सीधा बाउंस' },
{ नाम: 'कार्ट' },
{ नाम: 'चेकआउट' }
],
लिंक: [
{ स्रोत: 'वेबसाइट देखने', लक्ष्य: 'उत्पाद पृष्ठ', मूल्य: 1000 },
{ स्रोत: 'वेबसाइट देखने', लक्ष्य: 'सीधा बाउंस', मूल्य: 400 },
{ स्रोत: 'उत्पाद पृष्ठ', लक्ष्य: 'कार्ट', मूल्य: 600 },
{ स्रोत: 'कार्ट', लक्ष्य: 'चेकआउट', मूल्य: 450 }
],
रेखा शैली: {
रंग: 'स्रोत',
वक्रता: 0.5
}
}
]
};
लेआउट और लिंक शैली का बेहतरीन नियंत्रण
नोड अंतराल, रेखा वक्रता और होवर हाइलाइट व्यवहार को समायोजित करने से जटिल बहु-चरण प्रवाह साफ और पढ़ने योग्य बने रहते हैं।
1. नोड अंतराल नियंत्रण और स्रोत-लक्ष्य धारा प्रवाह
कस्टमाइज़ करना नोड अंतराल और सेट करना रेखा शैली.रंग: 'धारा'चरणों के बीच स्मूथ रंग संक्रमण बनाता है:
विकल्प = {
श्रृंखला: [
{
प्रकार: 'सैंकी',
बाएं: '5%',
दाएं: '15%',
नोड चौड़ाई: 24,
नोड अंतराल: 18,
खींचने योग्य: सच,
लेबल: {
स्थिति: 'दाएं',
रंग: '#333',
फॉन्ट आकार: 12
},
डेटा: [
{ नाम: 'स्रोत ए', आइटम शैली: { रंग: '#5470c6' } },
{ नाम: 'स्रोत बी', आइटम शैली: { रंग: '#91cc75' } },
{ नाम: 'चरण 1', आइटम शैली: { रंग: '#fac858' } },
{ नाम: 'चरण 2', आइटम शैली: { रंग: '#ee6666' } },
{ नाम: 'अंतिम आउटपुट', आइटम शैली: { रंग: '#73c0de' } }
],
लिंक: [
{ स्रोत: 'स्रोत ए', लक्ष्य: 'चरण 1', मूल्य: 50 },
{ स्रोत: 'स्रोत बी', लक्ष्य: 'चरण 1', मूल्य: 30 },
{ स्रोत: 'चरण 1', लक्ष्य: 'चरण 2', मूल्य: 60 },
{ स्रोत: 'चरण 1', लक्ष्य: 'अंतिम आउटपुट', मूल्य: 20 },
{ स्रोत: 'चरण 2', लक्ष्य: 'अंतिम आउटपुट', मूल्य: 60 }
],
रेखा शैली: {
रंग: 'धारा',
वक्रता: 0.6,
अपारदर्शिता: 0.4
}
}
]
};
रणनीतिक उत्तम व्यवहार
- प्रवाह के संरक्षण को बनाए रखें:सुनिश्चित करें कि एक नोड में प्रवेश करने वाले मूल्यों का योग या तो बराबर हो या तार्किक रूप से बाहर जाने वाले मूल्यों को ध्यान में रखे ताकि भ्रामक दृश्य अंतराल से बचा जा सके।
- सक्षम करें
अंतर्दृष्टि.फोकस: 'पास के संबंध': जब बहु-चरणीय प्रवाहों का सामना करते हैं, तो माउस के ऊपर ले जाने पर पास के लिंक पर ध्यान केंद्रित करने से उपयोगकर्ता को दृश्य शोर के बिना विशिष्ट मार्गों को अलग करने में सक्षम होता है। - ध्रुवीय लिंक का उपयोग करें: सेटिंग
लाइनस्टाइल.रंग: 'ध्रुवीय'स्रोत नोड के रंग को लक्ष्य नोड के रंग में चिकनाई से मिलाता है, जिससे बहु-चरणीय संक्रमण दृश्य रूप से स्पष्ट हो जाते हैं।