【點擊查看上一篇：如何使用JavaScript創建酷互動Sankey圖 （一）】
如何在視覺上增強JS Sankey圖表
由于我們已經知道如何使用AnyChart JS庫來繪制簡單的Sankey圖，所以我們來談談如何增強它們表示數據可視化任務的能力。
例如，您可以通過自定義外觀，添加下降和創建多級圖表來改進圖表。
a 自定義外觀
可以定制AnyChart Sankey圖表以改善其外觀。例如，節點和流的視覺外觀可以被配置為根據其正常和懸停狀態顯示不同的顏色。
為此，該normal()方法和hovered()方法可以與fill()方法（用于設置填充）和stroke()方法（用于設置筆劃）一起使用。
以下是配置圖表視覺外觀的代碼：
><html><head>><script src="//cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="//cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script></head><body><div id="container"></div><script>
anychart.onDocumentReady(function(){
//creating the data
var data = [
{from: "Google", to: "Facebook", weight: 20000},
{from: "Google", to: "Twitter", weight: 17000},
{from: "Google", to: "YouTube", weight: 8000},
{from: "Google", to: "Wikipedia", weight: 11000},
{from: "Bing", to: "Facebook", weight: 7500},
{from: "Bing", to: "Twitter", weight: 5000},
{from: "Bing", to: "Wikipedia", weight: 4000}
];//calling the Sankey functionvar sankey_chart = anychart.sankey(data);//customizing the width of the nodes
sankey_chart.nodeWidth("20%");//setting the chart title
sankey_chart.title("Sankey Diagram Customization Example");//customizing the vertical padding of the nodes
sankey_chart.nodePadding(20);//customizing the visual appearance of nodes
sankey_chart.node().normal().fill("#64b5f5 0.6");
sankey_chart.node().hovered().fill(anychart.color.darken("#64b5f7"));
sankey_chart.node().normal().stroke("#455a63", 2);//customizing the visual appearance of flows
sankey_chart.flow().normal().fill("#ffa000 0.5");
sankey_chart.flow().hovered().fill(anychart.color.darken("#ffa000"));
sankey_chart.flow().hovered().stroke("#455a63");//setting the container id
sankey_chart.container("container");//initiating drawing the Sankey diagram
sankey_chart.draw();
});</script></body></html>以下是配置的圖表在瀏覽器上的顯示方式：
b添加下降
只要缺少流的目的地，就會形成下降。由于未提供目標節點，因此下降通常會顯示丟失。因此，要設置下降，請null在to字段中包含值為的數據行。您還需要在from字段中設置數據流源的名稱，并在字段中設置dropoff的值weight。
您還可以自定義下降以適合您的偏好，例如配置其可視外觀。
以下是添加落差的代碼，該落差顯示了太陽光能量傳輸到建筑物內部的過程：
<html><head><script src="//cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="//cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script></head><body><div id="container"></div><script>
anychart.onDocumentReady(function(){
//creating the datavar data = [
{from: "Solar Light", to: "Shade", weight: 110},
{from: "Shade", to: null, weight: 60},
{from: "Shade", to: "Facade", weight: 40},
{from: "Facade", to: null, weight: 30},
{from: "Facade", to: "Interior Lighting", weight: 20}
];//calling the Sankey functionvar sankey_chart = anychart.sankey(data);//customizing the width of the nodes
sankey_chart.nodeWidth("50%");//setting the chart title
sankey_chart.title("Sankey Diagram Dropoff Example");//customizing the vertical padding of the nodes
sankey_chart.nodePadding(20);//customizing the visual appearance of dropoff
sankey_chart.dropoff().normal().fill(
{keys: ["#dd2c01 0.5", "#455a62 0.9"], angle: 275}
);
sankey_chart.dropoff().hovered().stroke("#455a61");//setting the container id
sankey_chart.container("container");//initiating drawing the Sankey diagram
sankey_chart.draw();
});</script></body></html>以下是瀏覽器上的dropoff：
C創建多級Sankey圖表
此外，您可以使用AnyChart JS庫來創建具有多級鏈接的Sankey Diagrams。
在下面的示例中，我創建了一個Sankey圖表，顯示了每年從一個國家/地區遷移到另一個國家/地區的任意數量的人員。節點排列成三列，并根據需要自動添加附加級別。
這是代碼：
<html><head><script src="//cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="//cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script></head><body><div id="container"></div> <script>
anychart.onDocumentReady(function(){
//creating the datavar data = [
{from: "France", to: "Canada", weight: 3000},
{from: "France", to: "Germany", weight: 2000},
{from: "France", to: "South Africa", weight: 1100},
{from: "France", to: "Portugal", weight: 900},
{from: "US", to: "China", weight: 2200},
{from: "US", to: "Canada", weight: 400},
{from: "US", to: "Germany", weight: 700},
{from: "US", to: "Portugal", weight: 200},
{from: "Canada", to: "China", weight: 1500},
{from: "Canada", to: "Japan", weight: 3300},
{from: "Canada", to: "England", weight: 550},
{from: "Germany", to: "China", weight: 1100},
{from: "Germany", to: "Japan", weight: 750},
{from: "Germany", to: "England", weight: 400},
{from: "South Africa", to: "China", weight: 3100},
{from: "Portugal", to: "China", weight: 2100},
{from: "Portugal", to: "Japan", weight: 1600}
];//calling the Sankey functionvar sankey_chart = anychart.sankey(data);//customizing the width of the nodes
sankey_chart.nodeWidth("50%");//setting the chart title
sankey_chart.title("Sankey Multilevel Chart Example");//customizing the vertical padding of the nodes
sankey_chart.nodePadding(20);//setting the container id
sankey_chart.container("container");//initiating drawing the Sankey diagram
sankey_chart.draw();
});</script></body></html>以下是多級Sankey圖表在瀏覽器上的外觀：
Wrapping up
正如您從JS圖表教程中看到的那樣，使用良好的數據可視化庫創建直觀和交互式的Sankey圖表并不是一門火箭科學。借助適合開發人員的解決方案，您可以創建精彩的圖表，并將您的數據可視化工作提升到新的水平。
當然，我們只是簡單介紹了使用Sankey圖表可以做些什么。您可以訪問AnyChart文檔，了解如何充分利用Sankey圖表以及其他幾種類型的圖表。
您還可以嘗試其他JavaScript圖表庫并評估其幫助您添加Web應用程序所需的可視化的功能。
【點擊查看上一篇：如何使用JavaScript創建酷互動Sankey圖 （一）】
想要購買AnyChart正版授權的朋友可以。
有關產品動態更多的精彩內容，敬請關注下方的微信公眾號▼▼▼
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
19次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線