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

如何使用JavaScript创建酷互动Sankey图 (一）

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

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

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

图片1_meitu_8.jpg

Sankey图在数据可视化任务中变得越来越流行。因此，前端Web开发人员必须知道如何创建此类图表。实际上，这是一个非常简单明了的过程，特别是如果您使用的是一个优秀的JavaScript图表库。

在本次教程中，向您展示如何创建美观，直观，交互式的JS（HTML5）Sankey图表。

什么是Sankey图

首先快速认识Sankey是什么，这样你才能理解目的，然后再开始讨论JavaScript图表问题。

Sankey图表是一种数据可视化，它按比例显示从一组值到另一组值的流量和数量。它以爱尔兰出生的船长兼工程师马修桑基命名，他创造了一张图表来说明19世纪后期蒸汽机的能效。

在Sankey图中，彼此链接的东西称为节点，它们使用线或箭头连接。线或箭头的宽度与从源到目标的流量成比例; 也就是说，宽度越大，流量越大。

线条或箭头可以在过程的每个阶段通过它们的路径连接或分开。您还可以添加颜色以将图表拆分为不同的类别，或者演示从流程的一个状态到另一个状态的转换。因此，Sankeys可用于显示系统中的主要传输或流程，这有助于指向整个过程。因此，这种类型的图表可以很好地可视化两个域之间的多对多关系或通过系统内的一组阶段的多个路径。

例如，Sankey图表可用于说明从源到目的地的能量流，货物从一个位置到另一个位置的转移，以及其他不同的过程及其状态。

如何构建一个简单的JavaScript Sankey图

Sankey图看起来很复杂，似乎很难创建。但是，网上有几个Sankey图表库，您可以使用它们轻松绘制交互式Sankey图表。

从本质上讲，几乎所有用于支持此图表类型的数据可视化的JavaScript库绘制Sankey图的步骤往往大致相同。因此，在掌握了如何使用其中任何一个之后，您可以简单地将该过程外推到其他库，并构建其他非凡的东西。

对于这个Sankey图教程，我将使用AnyChart JavaScript图表库。AnyChart重量轻，功能多样且易于使用。特别是其广泛的文档，其中包含用于测试事物的代码操场，各种支持的图表类型以及其他一些具有吸引力的数据可视化功能。

【点击下载AnyChart最新试用版】

现在，让我们亲自动手，看看如何使用AnyChart绘制基于JavaScript的互动式Sankey图表。

以下是要遵循的步骤：

1.创建一个容器

让我们首先在HTML页面上创建一个引用Sankey图的容器。

<div id="container"></div>

2.连接到JavaScript图表库

连接到JS图表库有助于将其功能部署到我们的工作空间。我们可以通过下载相关软件包并将其保存在本地或使用内容交付网络（CDN）服务来连接到库。CDN通常是首选，因为它从最靠近用户的数据中心部署库的文件，从而提高内容的可用性和性能。

AnyChart采用极简主义，基于模块的技术，允许您仅连接项目中所需的图表类型和功能，从而显着降低应用程序所需的JavaScript代码大小。

要创建Sankey图表，我们需要在

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

3.创建数据

现在，让我们创建将在Sankey图上显示的数据数组。AnyChart JS图表库需要定义以下数据字段：

from — specifies the source of the data flow
to — specifies the destination of the data flow
weight — specifies the value of the data

在AnyChart中，数据行标识连接两个节点的数据流，其名称在from和to字段中定义。该weight值表示每个流的宽度; 其中，宽度越大，流量越大。

自动排列成多列的节点具有不同的高度，这些高度与输入或输出流的总量成比例; ;也就是说，数量越大，高度越高。

例如，以下是一些网站每天从两个热门搜索引擎收到的网络流量的任意数据：

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}
 ];

4.调用Sankey功能

要绘制Sankey图，我们需要调用anychart.sankey()图表构造函数并将data参数传递给它，如下图所示。

var sankey_chart = anychart.sankey(data);

5.自定义节点

现在让我们调用该nodeWidth()方法来配置节点的宽度。节点的宽度可以设置为百分比或像素。

sankey_chart.nodeWidth("20%");

此外，我们可以调用该nodePadding()方法来设置节点之间的垂直填充。在这种情况下，我们为垂直填充提供了值20。

sankey_chart.nodePadding(20);

6.设置容器ID并开始绘制JS图表

让我们将Sankey Diagram指向我们在HTML页面上创建的容器ID，并开始绘制漂亮的图表。

sankey_chart.container("container");
sankey_chart.draw();

最后，我们将整个代码包装在AnyChart的onDocumentReady()函数中，以确保在网页准备好显示内容时呈现图表。

以下是使用JavaScript创建简单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 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("Simple Sankey Diagram 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>

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

图片2_meitu_9.jpg