国产情侣一区二区,日本三级色,午夜精品免费

如何使用JavaScript創(chuàng)建酷互動Sankey圖（二）

翻譯|使用教程|編輯：吳園園|2019-07-08 15:08:10.523|閱讀 580 次

概述：本教程將講解如何使用AnyChart繪制基于JavaScript的互動式Sankey圖表。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

【點擊查看上一篇：如何使用JavaScript創(chuàng)建酷互動Sankey圖（一）】

如何在視覺上增強JS Sankey圖表

由于我們已經(jīng)知道如何使用AnyChart JS庫來繪制簡單的Sankey圖，所以我們來談?wù)勅绾卧鰪娝鼈儽硎緮?shù)據(jù)可視化任務(wù)的能力。

例如，您可以通過自定義外觀，添加下降和創(chuàng)建多級圖表來改進圖表。

a 自定義外觀

可以定制AnyChart Sankey圖表以改善其外觀。例如，節(jié)點和流的視覺外觀可以被配置為根據(jù)其正常和懸停狀態(tài)顯示不同的顏色。

為此，該normal()方法和hovered()方法可以與fill()方法（用于設(shè)置填充）和stroke()方法（用于設(shè)置筆劃）一起使用。

以下是配置圖表視覺外觀的代碼：

><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>

以下是配置的圖表在瀏覽器上的顯示方式：

圖片4_meitu_11.jpg

b添加下降

只要缺少流的目的地，就會形成下降。由于未提供目標(biāo)節(jié)點，因此下降通常會顯示丟失。因此，要設(shè)置下降，請null在to字段中包含值為的數(shù)據(jù)行。您還需要在from字段中設(shè)置數(shù)據(jù)流源的名稱，并在字段中設(shè)置dropoff的值weight。

您還可以自定義下降以適合您的偏好，例如配置其可視外觀。

以下是添加落差的代碼，該落差顯示了太陽光能量傳輸?shù)浇ㄖ飪?nèi)部的過程：

<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：

Making-a-JavaScript-Sankey-Diagram-with-a-drop-off_meitu_13.jpg

C創(chuàng)建多級Sankey圖表

此外，您可以使用AnyChart JS庫來創(chuàng)建具有多級鏈接的Sankey Diagrams。

在下面的示例中，我創(chuàng)建了一個Sankey圖表，顯示了每年從一個國家/地區(qū)遷移到另一個國家/地區(qū)的任意數(shù)量的人員。節(jié)點排列成三列，并根據(jù)需要自動添加附加級別。

這是代碼：

 <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圖表在瀏覽器上的外觀：

JS-coding-a-multi-level-Sankey-diagram-for-websites-and-apps_meitu_14.jpg