بررسی اجمالی
نمودار سانکی تجسمی است که برای به تصویر کشیدن یک جریان از یک مجموعه مقادیر به مجموعه دیگر استفاده می شود. چیزهایی که متصل می شوند گره و اتصالات پیوند نامیده می شوند. Sankey ها زمانی به بهترین وجه استفاده می شوند که بخواهید یک نگاشت چند به چند بین دو دامنه (به عنوان مثال، دانشگاه ها و رشته های تحصیلی) یا چندین مسیر را از طریق مجموعه ای از مراحل نشان دهید (به عنوان مثال، Google Analytics از sankeys استفاده می کند تا نشان دهد که چگونه ترافیک از صفحات به سمت جریان می یابد. صفحات دیگر در وب سایت شما).
برای کنجکاوها، نام آنها از کاپیتان سانکی گرفته شده است، که نموداری از کارایی موتور بخار ایجاد کرد که از فلش هایی با عرض متناسب با اتلاف گرما استفاده می کرد.
توجه: نمودار سانکی ممکن است در نسخه‌های آتی نمودارهای Google تحت بازنگری‌های اساسی باشد.
نمودارهای Sankey با استفاده از SVG یا VML در مرورگر ارائه می‌شوند، هر کدام که برای مرورگر کاربر مناسب است. کد طرح بندی سانکی گوگل از کد طرح بندی سانکی D3 مشتق شده است.
توجه: نمودارهای Google sankey در 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 پیوند می‌دهد، نمودار شما ارائه نمی‌شود.
سانکی های چند سطحی
می توانید یک نمودار Sankey با چندین سطح اتصال ایجاد کنید:
نمودارهای Sankey سطوح اضافی را در صورت نیاز اضافه می کنند و آنها را به طور خودکار تنظیم می کنند. در اینجا کد کامل نمودار بالا آمده است:
<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>
کنترل رنگ ها
نمودارهای Sankey این قابلیت را دارند که رنگ های دلخواه را برای گره ها و لینک ها تنظیم کنند. هر دو گره و پیوند را می توان با استفاده از گزینه های colors آنها (به ترتیب sankey.node.colors و sankey.link.colors ) پالت های رنگی سفارشی داد. همچنین می توان با استفاده از گزینه colorMode حالت های رنگ آمیزی مختلفی به آنها داد.
اگر رنگ‌ها سفارشی نشده باشند، به‌طور پیش‌فرض روی پالت Material استاندارد قرار می‌گیرند.
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 استفاده کنید:
رنگ استروک را می توان در قالب RGB یا با نام انگلیسی مشخص کرد.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
سفارشی کردن برچسب ها
متن در نمودارهای sankey را می توان با استفاده از 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-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست |
| ارتفاع | ارتفاع نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: ارتفاع عنصر حاوی |
| sankey.تکرار | با سانکی‌های چند سطحی، گاهی اوقات مشخص نیست که گره‌ها برای خوانایی بهینه در کجا قرار می‌گیرند. موتور طرح‌بندی 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'
]
}
}
نوع: شی پیش فرض: null |
| sankey.link.colorMode | یک حالت رنگ آمیزی برای پیوندهای بین گره ها تنظیم می کند. مقادیر ممکن:
این گزینه sankey.link.color را لغو می کند. نوع: رشته پیش فرض: "هیچ" |
| 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'
]
}
}
نوع: شی پیش فرض: null |
| sankey.node.colorMode | یک حالت رنگ آمیزی برای گره های سانکی تنظیم می کند. مقادیر ممکن:
نوع: رشته پیش فرض: "بی نظیر" |
| راهنمای ابزار | یک شی با اعضا برای پیکربندی عناصر مختلف راهنمای ابزار. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است: {textStyle: {color: '#FF0000'}, showColorCode: true} نوع: شی پیش فرض: null |
| tooltip.isHtml | اگر روی true تنظیم شده باشد، از نکات ابزار رندر شده HTML (به جای SVG) استفاده کنید. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید. توجه: سفارشی‌سازی محتوای راهنمای ابزار HTML از طریق نقش داده ستون راهنمای ابزار توسط تجسم نمودار حباب پشتیبانی نمی‌شود . نوع: بولی پیش فرض: نادرست |
| tooltip.textStyle | یک شی که سبک متن راهنمای ابزار را مشخص می کند. شیء دارای این قالب است:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
نوع: شی پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
| عرض | عرض نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: عرض عنصر حاوی |
مواد و روش ها
| روش | |
|---|---|
draw(data, options) | نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد نوع بازگشت: ندارد |
getBoundingBox(id) | یک شی شامل سمت چپ، بالا، عرض و ارتفاع
مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید. نوع بازگشت: شی |
getSelection() | آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. نوع بازگشت: آرایه ای از عناصر انتخابی |
setSelection() | موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
| نام | |
|---|---|
error | هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود. ویژگی ها: شناسه، پیام |
onmouseover | هنگامی که کاربر روی یک موجودیت بصری حرکت می‌کند فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است. خواص: سطر، ستون |
onmouseout | زمانی که کاربر از یک موجود بصری دور می‌شود، فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است. خواص: سطر، ستون |
ready | نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد خواص: هیچ |
select | هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، خواص: هیچ |
سیاست داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.