本教程将讲解如何使用AnyChart绘制基于JavaScript的互动式Sankey图表。
【点击查看上一篇：如何使用JavaScript创建酷互动Sankey图 （一）】
如何在视觉上增强JS Sankey图表
由于我们已经知道如何使用AnyChart JS库来绘制简单的Sankey图，所以我们来谈谈如何增强它们表示数据可视化任务的能力。
例如，您可以通过自定义外观，添加下降和创建多级图表来改进图表。
a 自定义外观
可以定制AnyChart Sankey图表以改善其外观。例如，节点和流的视觉外观可以被配置为根据其正常和悬停状态显示不同的颜色。
为此，该normal()方法和hovered()方法可以与fill()方法（用于设置填充）和stroke()方法（用于设置笔划）一起使用。
以下是配置图表视觉外观的代码：
><html><head>><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></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 nodessankey_chart.nodeWidth("20%");//setting the chart titlesankey_chart.title("Sankey Diagram Customization Example");//customizing the vertical padding of the nodessankey_chart.nodePadding(20);//customizing the visual appearance of nodessankey_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 flowssankey_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 idsankey_chart.container("container");//initiating drawing the Sankey diagramsankey_chart.draw();});</script></body></html>
以下是配置的图表在浏览器上的显示方式：
b添加下降
只要缺少流的目的地，就会形成下降。由于未提供目标节点，因此下降通常会显示丢失。因此，要设置下降，请null在to字段中包含值为的数据行。您还需要在from字段中设置数据流源的名称，并在字段中设置dropoff的值weight。
您还可以自定义下降以适合您的偏好，例如配置其可视外观。
以下是添加落差的代码，该落差显示了太阳光能量传输到建筑物内部的过程：
<html><head><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></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 nodessankey_chart.nodeWidth("50%");//setting the chart titlesankey_chart.title("Sankey Diagram Dropoff Example");//customizing the vertical padding of the nodessankey_chart.nodePadding(20);//customizing the visual appearance of dropoffsankey_chart.dropoff().normal().fill( {keys: ["#dd2c01 0.5", "#455a62 0.9"], angle: 275});sankey_chart.dropoff().hovered().stroke("#455a61");//setting the container idsankey_chart.container("container");//initiating drawing the Sankey diagramsankey_chart.draw();});</script></body></html>
以下是浏览器上的dropoff：
C创建多级Sankey图表
此外，您可以使用AnyChart JS库来创建具有多级链接的Sankey Diagrams。
在下面的示例中，我创建了一个Sankey图表，显示了每年从一个国家/地区迁移到另一个国家/地区的任意数量的人员。节点排列成三列，并根据需要自动添加附加级别。
这是代码：
<html><head><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></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 nodessankey_chart.nodeWidth("50%");//setting the chart titlesankey_chart.title("Sankey Multilevel Chart Example");//customizing the vertical padding of the nodessankey_chart.nodePadding(20);//setting the container idsankey_chart.container("container");//initiating drawing the Sankey diagramsankey_chart.draw();});</script></body></html>
以下是多级Sankey图表在浏览器上的外观：
Wrapping up
正如您从JS图表教程中看到的那样，使用良好的数据可视化库创建直观和交互式的Sankey图表并不是一门火箭科学。借助适合开发人员的解决方案，您可以创建精彩的图表，并将您的数据可视化工作提升到新的水平。
当然，我们只是简单介绍了使用Sankey图表可以做些什么。您可以访问AnyChart文档，了解如何充分利用Sankey图表以及其他几种类型的图表。
您还可以尝试其他JavaScript图表库并评估其帮助您添加Web应用程序所需的可视化的功能。
【点击查看上一篇：如何使用JavaScript创建酷互动Sankey图 （一）】
想要购买AnyChart正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！