Sankey diagram که در مصورسازی داده‌ها کاربرد فراوانی دارد به دیاگرام‌هایی گفته می‌شود که گره‌ها یا node‌ ها ، به وسیله خطوط یا فلش به یکدیگر متصل هستند .
این نمودارها برای نمایش دادن انتقال یک جریان از یک نقطه به نقطه دیگر ، استفاده می‌شوند .برای مثال، نمودارهای Sankey را می‌توان برای نشان دادن جریان انرژی از منبع به مقصد، انتقال کالا از یک مکان به مکان دیگر ، مهاجرت از یک ناحیه به ناحیه دیگر و سایر فرآیندهای متنوع استفاده کرد.
نمودارهای Sankey اغلب در زمینه‌های علم، به خصوص فیزیک استفاده می‌شود.
برای کشیدن Sankey Diagram در جاوااسکریپت ، از کتابخانه anychart می‌کنیم .

گام اول - اتصال به دو کتابخانه  anychart-sankey ,anychart-core در صفحه وب از طریق سرورهای CDN.
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>​


گام دوم - یک تگ div به همراه یک id به منظور کشیدن دیاگرام‌ها ، پیاده می‌کنیم .

<div id="chart-container"></div>

گام سوم - حال باید آرایه ای از داده ها را به منظور مصورسازی ، پیاده‌سازی کنیم . این آرایه دارای 3 مقدار زیر می‌باشد .
from    - منبع جریان جریان را مشخص می‌کند .
to        - مقصد جریان داده را مشخص می‌کند .
weight - مقدار داده ها را مشخص می‌کند .

به عنوان مثال ، می‌خواهیم با استفاده از داده‌های تعداد کاربران یک وب سایت ، Sankey diagram را پیاده کنیم :

    var visitors_data = [
        {from: "Iran", to: "Facebook", weight: 20000},
        {from: "Japan", to: "Facebook", weight: 7800},
        {from: "Japan", to: "YouTube", weight: 4000},
        {from: "USA", to: "YouTube", weight: 12300},
        {from: "Canada", to: "YouTube", weight: 7500},
        {from: "Canada", to: "Twitter", weight: 17500},
        {from: "USA", to: "Twitter", weight: 3200},
        {from: "Iran", to: "Wikipedia", weight: 34000}
    ];

گام چهارم - کشیدن دیاگرام با استفاده از توابع موجود در کتابخانه anychart :

    var sankey_chart = anychart.sankey(visitors_data);
    sankey_chart.nodeWidth("20%");
    sankey_chart.nodePadding(20);
    sankey_chart.container("chart-container");
    sankey_chart.draw();

خروجی :


در این مقاله سعی شد کتابخانه AnyChart و پیاده سازی Sankey diagram در آن معرفی شود ، این کتابخانه امکانات بسیار فراوانی را برای پیاده سازی انواع چارت و دیاگرام در اختیار برنامه نویسان گذاشته است . در صورت علاقه می‌توانید به وب سایت anychart مراجعه کنید .