岛国电影一区二区三区,国产精品欧美久,91狠狠操

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

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

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

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

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

如何在視覺(jué)上增強(qiáng)JS Sankey圖表

由于我們已經(jīng)知道如何使用AnyChart JS庫(kù)來(lái)繪制簡(jiǎn)單的Sankey圖，所以我們來(lái)談?wù)勅绾卧?強(qiáng)它們表示數(shù)據(jù)可視化任務(wù)的能力。

例如，您可以通過(guò)自定義外觀，添加下降和創(chuàng)建多級(jí)圖表來(lái)改進(jìn)圖表。

a 自定義外觀

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

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

以下是配置圖表視覺(jué)外觀的代碼：

><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添加下降

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

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

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

<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)建多級(jí)Sankey圖表

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

在下面的示例中，我創(chuàng)建了一個(gè)Sankey圖表，顯示了每年從一個(gè)國(guó)家/地區(qū)遷移到另一個(gè)國(guó)家/地區(qū)的任意數(shù)量的人員。節(jié)點(diǎn)排列成三列，并根據(jù)需要自動(dòng)添加附加級(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>

以下是多級(jí)Sankey圖表在瀏覽器上的外觀：

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

Wrapping up

正如您從JS圖表教程中看到的那樣，使用良好的數(shù)據(jù)可視化庫(kù)創(chuàng)建直觀和交互式的Sankey圖表并不是一門火箭科學(xué)。借助適合開(kāi)發(fā)人員的解決方案，您可以創(chuàng)建精彩的圖表，并將您的數(shù)據(jù)可視化工作提升到新的水平。

當(dāng)然，我們只是簡(jiǎn)單介紹了使用Sankey圖表可以做些什么。您可以訪問(wèn)AnyChart文檔，了解如何充分利用Sankey圖表以及其他幾種類型的圖表。

您還可以嘗試其他JavaScript圖表庫(kù)并評(píng)估其幫助您添加Web應(yīng)用程序所需的可視化的功能。

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

想要購(gòu)買 AnyChart正版授權(quán)的朋友可以。

有關(guān)產(chǎn)品動(dòng)態(tài)更多的精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)▼▼▼

圖片2.jpg