如何使用JavaScript创建酷互动Sankey图（二）-控件新闻-慧都网

如何使用JavaScript创建酷互动Sankey图（二）

翻译|使用教程|编辑：吴园园|2019-07-08 15:08:10.523|阅读 538 次

概述：本教程将讲解如何使用AnyChart绘制基于JavaScript的互动式Sankey图表。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

【点击查看上一篇：如何使用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>

以下是配置的图表在浏览器上的显示方式：

图片4_meitu_11.jpg

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：

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

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图表在浏览器上的外观：

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