खास जानकारी
सैंकी डायग्राम एक विज़ुअलाइज़ेशन है, जिसका इस्तेमाल वैल्यू के एक सेट से दूसरे सेट में फ़्लो को दिखाने के लिए किया जाता है. कनेक्ट की जा रही चीज़ों को नोड कहा जाता है और कनेक्शन को लिंक कहा जाता है. सैंकी का सबसे अच्छा इस्तेमाल तब होता है, जब आप दो डोमेन (उदाहरण के लिए, यूनिवर्सिटी और मेजर) के बीच की मेनी-टू-मेनी मैपिंग दिखाना चाहते हों या स्टेज के सेट के ज़रिए एक से ज़्यादा पाथ दिखाना चाहते हों (उदाहरण के लिए, Google Analytics, सैंकी का इस्तेमाल करके यह दिखाता है कि आपकी वेबसाइट के पेजों से दूसरे पेजों पर ट्रैफ़िक कैसे आता है).
जिज्ञासु लोगों के लिए, इनका नाम कैप्टन सैंकी के नाम पर रखा गया, जिन्होंने स्टीम इंजन की क्षमता का डायग्राम बनाया. इसमें तीरों का इस्तेमाल, जिनकी चौड़ाई के अनुपात में गर्मी के नुकसान के लिए किया जाता था.
ध्यान दें: हो सकता है कि आने वाले समय में Google चार्ट की रिलीज़ में, सैंकी चार्ट में अहम बदलाव किए जा रहे हों.
सैंकी डायग्राम, SVG या VML का इस्तेमाल करके ब्राउज़र में रेंडर किए जाते हैं. उपयोगकर्ता के ब्राउज़र के हिसाब से जो भी सही हो. Google का सैंकी लेआउट कोड, D3 के सैंकी लेआउट कोड से लिया गया है.
ध्यान दें: Google सैंकी चार्ट, Microsoft Internet Explorer 8 और इससे पहले के वर्शन में उपलब्ध नहीं हैं.
एक आसान उदाहरण
मान लें कि आपके पास दो कैटगरी A और B थीं, जो तीन अन्य कैटगरी X, Y, और Z से जुड़ी होती हैं. उनमें से कुछ कनेक्शन दूसरे कनेक्शन की तुलना में भारी होते हैं. उदाहरण के लिए, B का X से कमज़ोर कनेक्शन है और Y से काफ़ी मोटा कनेक्शन है.
कनेक्शन को हाइलाइट करने के लिए किसी एक लिंक पर कर्सर घुमाएं.
सैंकी चार्ट बनाने के लिए, पंक्तियों का एक सेट दें जिसमें
हर एक कनेक्शन से जुड़ी जानकारी, जैसे कि से लेकर दूसरी तक, और वज़न के बारे में जानकारी मौजूद होनी चाहिए. इसके बाद, चार्ट शुरू करने के लिए, google.visualization.Sankey()
तरीके का इस्तेमाल करें. इसके बाद, उसे रेंडर करने के लिए draw()
तरीके का इस्तेमाल करें:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ], [ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]); // Sets chart options. var options = { width: 600, }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 900px; height: 300px;"></div> </body> </html>
ध्यान दें: अपने डेटा में साइकल शामिल न करें: अगर A खुद से लिंक होता है या B से लिंक होता है, जो C से लिंक होता है और A से लिंक होता है, तो आपका चार्ट रेंडर नहीं होगा.
मल्टीलेवल सैंकी
कनेक्शन के कई लेवल के साथ सैंकी चार्ट बनाया जा सकता है:
सैंकी चार्ट, ज़रूरत के हिसाब से अतिरिक्त लेवल जोड़ेंगे. ये लेवल अपने-आप तैयार होते हैं. यहां ऊपर दिए गए चार्ट का पूरा कोड दिया गया है:
<html> <body> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_multiple" style="width: 900px; height: 300px;"></div> <script type="text/javascript"> google.charts.load("current", {packages:["sankey"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Brazil', 'Portugal', 5 ], [ 'Brazil', 'France', 1 ], [ 'Brazil', 'Spain', 1 ], [ 'Brazil', 'England', 1 ], [ 'Canada', 'Portugal', 1 ], [ 'Canada', 'France', 5 ], [ 'Canada', 'England', 1 ], [ 'Mexico', 'Portugal', 1 ], [ 'Mexico', 'France', 1 ], [ 'Mexico', 'Spain', 5 ], [ 'Mexico', 'England', 1 ], [ 'USA', 'Portugal', 1 ], [ 'USA', 'France', 1 ], [ 'USA', 'Spain', 1 ], [ 'USA', 'England', 5 ], [ 'Portugal', 'Angola', 2 ], [ 'Portugal', 'Senegal', 1 ], [ 'Portugal', 'Morocco', 1 ], [ 'Portugal', 'South Africa', 3 ], [ 'France', 'Angola', 1 ], [ 'France', 'Senegal', 3 ], [ 'France', 'Mali', 3 ], [ 'France', 'Morocco', 3 ], [ 'France', 'South Africa', 1 ], [ 'Spain', 'Senegal', 1 ], [ 'Spain', 'Morocco', 3 ], [ 'Spain', 'South Africa', 1 ], [ 'England', 'Angola', 1 ], [ 'England', 'Senegal', 1 ], [ 'England', 'Morocco', 2 ], [ 'England', 'South Africa', 7 ], [ 'South Africa', 'China', 5 ], [ 'South Africa', 'India', 1 ], [ 'South Africa', 'Japan', 3 ], [ 'Angola', 'China', 5 ], [ 'Angola', 'India', 1 ], [ 'Angola', 'Japan', 3 ], [ 'Senegal', 'China', 5 ], [ 'Senegal', 'India', 1 ], [ 'Senegal', 'Japan', 3 ], [ 'Mali', 'China', 5 ], [ 'Mali', 'India', 1 ], [ 'Mali', 'Japan', 3 ], [ 'Morocco', 'China', 5 ], [ 'Morocco', 'India', 1 ], [ 'Morocco', 'Japan', 3 ] ]); // Set chart options var options = { width: 600, }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple')); chart.draw(data, options); } </script> </body> </html>
रंग कंट्रोल करना
सैंकी चार्ट में, नोड और लिंक के लिए पसंद के मुताबिक रंग सेट करने की सुविधा होती है. नोड और लिंक, दोनों को उनकी पसंद के हिसाब से रंग पटल दिए जा सकते हैं. इसके लिए, उनके colors
विकल्पों (क्रम के हिसाब से sankey.node.colors
और sankey.link.colors
) का इस्तेमाल किया जा सकता है. colorMode
विकल्प का इस्तेमाल करके,
इन्हें अलग-अलग कलर मोड भी दिया जा सकता है.
अगर रंग पसंद के मुताबिक नहीं किए गए हैं, तो वे डिफ़ॉल्ट रूप से स्टैंडर्ड मटीरियल पैलेट का इस्तेमाल करते हैं.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c']; var options = { height: 400, sankey: { node: { colors: colors }, link: { colorMode: 'gradient', colors: colors } } };
कॉन्फ़िगरेशन के विकल्पों की मदद से, लिंक, नोड, और लेबल के रंग कंट्रोल किए जा सकते हैं. यहां, हम समान रंग लेकिन अलग-अलग चमक वाले तीन विकल्पों को चुनते हैं:
यहां बताया गया है कि वे विकल्प कैसे दिखते हैं:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae' } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
sankey.link.color.fillOpacity
विकल्प का इस्तेमाल करके, लिंक की पारदर्शिता को भी कंट्रोल किया जा सकता है:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae', fillOpacity: 0.8 } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
लिंक के चारों ओर बॉर्डर बनाने के लिए, sankey.link.color.stroke
और sankey.link.color.strokeWidth
विकल्प इस्तेमाल करें:
स्ट्रोक का रंग आरजीबी फ़ॉर्मैट में या अंग्रेज़ी में दिया जा सकता है.
var options = { width: 750, height: 400, sankey: { node: { colors: [ '#a61d4c' ] }, link: { color: { stroke: 'black', strokeWidth: 1 } }, } };
लेबल को पसंद के मुताबिक बनाना
sankey.node.label.fontName
और दोस्तों की मदद से, सैंकी चार्ट पर
टेक्स्ट को पसंद के मुताबिक बनाया जा सकता है:
ऊपर दिए गए चार्ट के लिए छंद विकल्प यहां दिया गया है:
var options = { width: 600, sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 14, color: '#871b47', bold: true, italic: true } } }, };
sankey.node.labelPadding
विकल्प की मदद से, नोड के हिसाब से लेबल की जगह में बदलाव किया जा सकता है:
ऊपर दिए गए चार्ट में, हमने लेबल और नोड के बीच 30 पिक्सल की पैडिंग (जगह) जोड़ी है.
var options = { width: 600, sankey: { node: { labelPadding: 30 } }, };
नोड एडजस्ट करना
sankey.node.width
की मदद से, नोड की चौड़ाई को कंट्रोल किया जा सकता है:
ऊपर, हमने नोड की चौड़ाई 2 पर सेट की है.
var options = { width: 600, sankey: { node: { width: 2 } }, };
sankey.node.nodePadding
की मदद से, नोड के बीच की दूरी में बदलाव किया जा सकता है:
ऊपर दिए गए चार्ट में, हमने sankey.node.nodePadding
को 80 पर सेट किया है.
var options = { width: 900, sankey: { node: { nodePadding: 80 } }, };
लोड हो रहा है
google.charts.load
पैकेज का नाम "sankey"
है:
google.charts.load("current" {packages: ["sankey"]});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.Sankey
है:
var visualization = new google.visualization.Sankey(container);
डेटा फ़ॉर्मैट
पंक्तियां: टेबल की हर पंक्ति दो लेबल के बीच के कनेक्शन को दिखाती है. तीसरा कॉलम उस कनेक्शन की क्षमता को दिखाता है और लेबल के बीच पाथ की चौड़ाई में दिखेगा.
कॉलम:
कॉलम 0 | कॉलम 1 | कॉलम 2 | ... | कॉलम N (ज़रूरी नहीं) | |
---|---|---|---|---|---|
मकसद: | सोर्स | डेस्टिनेशन | वैल्यू | ... | वैकल्पिक भूमिकाएं |
डेटा टाइप: | स्ट्रिंग | स्ट्रिंग | नंबर | ... | |
भूमिका: | डोमेन | डोमेन | डेटा | ... | |
कॉलम की वैकल्पिक भूमिकाएं: | बिलकुल नहीं |
बिलकुल नहीं |
बिलकुल नहीं |
... |
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
forceIFrame |
चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
ऊंचाई |
चार्ट की ऊंचाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
|
sankey.iterations |
मल्टीलेवल सैंकी चार्ट में, कभी-कभी नोड को सही तरीके से समझने में मुश्किल होती है, ताकि उन्हें आसानी से पढ़ा जा सके. अलग-अलग नोड लेआउट के साथ D3 लेआउट इंजन के एक्सपेरिमेंट. ये एक्सपेरिमेंट, टाइप: पूर्णांक
डिफ़ॉल्ट: 32
|
sankey.link |
यह नीति नोड के बीच के कनेक्शन के एट्रिब्यूट को कंट्रोल करती है. फ़िलहाल, सभी एट्रिब्यूट रंग से जुड़े हैं: sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
sankey.link.colorMode |
नोड के बीच के लिंक के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:
यह विकल्प, sankey.link.color को बदल देता है. Type: स्ट्रिंग
डिफ़ॉल्ट: 'कोई नहीं'
|
sankey.node |
यह नीति नोड के एट्रिब्यूट को कंट्रोल करती है (लिंक के बीच वर्टिकल बार): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
sankey.node.colorMode |
सैंकी नोड के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'यूनीक'
|
टूलटिप |
एक ऑब्जेक्ट, जिसमें सदस्यों के साथ अलग-अलग टूलटिप एलिमेंट को कॉन्फ़िगर करने की सुविधा होती है. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
tooltip.isHtml |
अगर इसे 'सही है' पर सेट किया जाता है, तो SVG के रेंडर किए गए टूलटिप के बजाय, एचटीएमएल के रेंडर किए गए टूलटिप का इस्तेमाल करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें. ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
tooltip.textStyle |
ऐसा ऑब्जेक्ट जो टूलटिप टेक्स्ट की स्टाइल के बारे में बताता है. ऑब्जेक्ट का प्रारूप ऐसा है: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
चौड़ाई |
चार्ट की चौड़ाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई
|
तरीके
तरीका | |
---|---|
draw(data, options) |
चार्ट बनाता है. सामान लौटाने का तरीका: कोई नहीं
|
getBoundingBox(id) |
चार्ट के एलिमेंट
वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें. रिटर्न टाइप: ऑब्जेक्ट
|
getSelection() |
चुनी गई चार्ट इकाइयों का कलेक्शन दिखाता है.
बार, लेजेंड एंट्री, और कैटगरी चुनी जा सकने वाली इकाइयां हैं.
इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है.
रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
|
setSelection() |
चार्ट में मौजूद, दी गई इकाइयों को चुनता है. चुने गए पिछले किसी भी आइटम को रद्द कर देगा.
बार, लेजेंड एंट्री, और कैटगरी चुनी जा सकने वाली इकाइयां हैं.
इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई चुनी जा सकती है.
सामान लौटाने का तरीका: कोई नहीं
|
clearChart() |
चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है. सामान लौटाने का तरीका: कोई नहीं
|
इवेंट
नाम | |
---|---|
error |
यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है. प्रॉपर्टी: आईडी, मैसेज
|
onmouseover |
यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी विज़ुअल इकाई पर माउस रखता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. बार, डेटा टेबल में किसी सेल, कॉलम से लेजेंड एंट्री (पंक्ति का इंडेक्स खाली है), और कैटगरी को पंक्ति (कॉलम इंडेक्स शून्य है) से जुड़ा होता है. प्रॉपर्टी: पंक्ति, कॉलम
|
onmouseout |
यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई से दूर होता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. बार, डेटा टेबल में किसी सेल, कॉलम से लेजेंड एंट्री (पंक्ति का इंडेक्स खाली है), और कैटगरी को पंक्ति (कॉलम इंडेक्स शून्य है) से जुड़ा होता है. प्रॉपर्टी: पंक्ति, कॉलम
|
ready |
यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करना है, तो प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
select |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. चुनी गई जानकारी के बारे में जानने के लिए, प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.