نمودار سانکی

  1. بررسی اجمالی
  2. یک مثال ساده
  3. سانکی های چند سطحی
  4. کنترل رنگ ها
  5. سفارشی کردن فونت ها
  6. تنظیم گره ها
  7. بارگذاری
  8. فرمت داده ها
  9. گزینه های پیکربندی
  10. مواد و روش ها
  11. مناسبت ها
  12. سیاست داده

بررسی اجمالی

نمودار سانکی تجسمی است که برای به تصویر کشیدن یک جریان از یک مجموعه مقادیر به مجموعه دیگر استفاده می شود. چیزهایی که متصل می شوند گره و اتصالات پیوند نامیده می شوند. 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 با طرح‌بندی‌های گره‌های مختلف آزمایش می‌کند، زمانی که تلاش‌های sankey.iterations متوقف می‌شود. هرچه این عدد بزرگتر باشد، چیدمان سانکی‌های پیچیده دلپذیرتر است، اما هزینه‌ای دارد: رندر شدن سانکی‌ها زمان بیشتری می‌برد. برعکس، هرچه این عدد کوتاه‌تر باشد، نمودارهای شما سریع‌تر ارائه می‌شوند.

نوع: عدد صحیح
پیش فرض: 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

یک حالت رنگ آمیزی برای پیوندهای بین گره ها تنظیم می کند. مقادیر ممکن:

  • 'source' - رنگ گره منبع برای پیوندهای تمام گره های هدف استفاده می شود.
  • 'target' - رنگ گره هدف برای پیوند به گره های منبع آن استفاده می شود.
  • 'gradient' - پیوند بین یک گره منبع و هدف به عنوان یک گرادیان از رنگ گره مبدا به رنگ گره هدف رنگ می شود.
  • 'none' - گزینه پیش فرض؛ رنگ های پیوند روی پیش فرض تنظیم می شوند (یا رنگی که توسط گزینه های sankey.link.color.fill و sankey.link.color.fillOpacity مشخص شده است).

این گزینه 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

یک حالت رنگ آمیزی برای گره های سانکی تنظیم می کند. مقادیر ممکن:

  • 'unique' - هر گره یک رنگ منحصر به فرد دریافت می کند.
نوع: رشته
پیش فرض: "بی نظیر"
راهنمای ابزار

یک شی با اعضا برای پیکربندی عناصر مختلف راهنمای ابزار. برای مشخص کردن ویژگی های این شی، می توانید از نماد لغوی شی استفاده کنید، همانطور که در اینجا نشان داده شده است:

{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 می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
عرض

عرض نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: عرض عنصر حاوی

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد ready می پذیرد. Extended description

نوع بازگشت: ندارد
getBoundingBox(id)

یک شی شامل سمت چپ، بالا، عرض و ارتفاع id عنصر نمودار را برمی‌گرداند. قالب id هنوز مستند نشده است (آنها مقادیر بازگشتی کنترل کننده رویداد هستند)، اما در اینجا چند نمونه وجود دارد:

var cli = chart.getChartLayoutInterface();

ارتفاع منطقه نمودار
cli.getBoundingBox('chartarea').height
عرض میله سوم در سری اول نمودار میله ای یا ستونی
cli.getBoundingBox('bar#0#2').width
جعبه مرزی گوه پنجم نمودار دایره ای
cli.getBoundingBox('slice#4')
کادر مرزی داده های نمودار یک نمودار عمودی (مثلاً ستونی):
cli.getBoundingBox('vAxis#0#gridline')
کادر مرزی داده های نمودار یک نمودار افقی (مثلاً میله ای):
cli.getBoundingBox('hAxis#0#gridline')

مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید.

نوع بازگشت: شی
getSelection()

آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. Extended description

نوع بازگشت: آرایه ای از عناصر انتخابی
setSelection()

موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. Extended description

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

نام
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

ویژگی ها: شناسه، پیام
onmouseover

هنگامی که کاربر روی یک موجودیت بصری حرکت می‌کند فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است.

خواص: سطر، ستون
onmouseout

زمانی که کاربر از یک موجود بصری دور می‌شود، فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است.

خواص: سطر، ستون
ready

نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.

خواص: هیچ
select

هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید.

خواص: هیچ

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.