FusionCharts创建Sankey流程图

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案，目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

Sankey图是一种流程图，描述了从一个节点到另一个节点的资源（材料，能源，成本等）流。每个流的起点和终点称为节点，它们之间的流路径称为链接。一对节点之间只能有一个链接。每对节点之间的流的值由链接的宽度编码。链接的颜色有助于与它们各自的节点建立视觉映射。

要创建sankey图，请遵循以下步骤：
在JSON数据中，以"": ""格式设置属性及其对应的值。
使用type属性指定图表类型。要渲染sankey图，请设置sankey。
使用renderAt属性设置容器对象。
使用width和height属性指定图表的尺寸。
使用dataFormat属性设置要传递给图表对象的数据类型（JSON / XML）。
有关属性的详细列表，请参考sankey图的图表属性页面。
可以以水平布局（默认）或垂直布局绘制Sankey图。带有水平方向的Sankey图如下所示：

上面提供的Sankey图中有19个节点。链接连接彼此相关的任何两个节点（即，在它们之间发生流）。如果将鼠标悬停在节点上，将看到与该节点关联的所有链接（或关系）。悬停在链接上将显示两个都是与之关联的节点。

重要概念相关的热平衡图

Sankey图可用于表示流数据。使用连接链接从一个节点流到另一个节点。整个图中不应重复任何节点，并且一对连接节点之间最多应有一个链接。

下面简要介绍一些关键概念：

节点

节点是流程图中的关键关头。每个节点可以具有流资源的流入和流出。在我们的Sankey图中，它们当前由矩形表示。可以进行大量的自定义，包括大小，颜色，标签，填充等。

每个节点在Sankey图中应该只出现一次。

要自定义节点，请定义“ nodes”对象并为每个节点指定参数label。

链接

链接是连接节点的路径。他们为流程指明方向。它们本质上是流体，并根据它们所连接的节点进行成形（或弯曲）。每个链接都应该知道它的源节点和宿节点。流值由链接的宽度编码。可以根据颜色，曲率和值定制它们。

如果链接没有“从”和“到”节点，则不会绘制该链接。

一对节点之间应该有最大的链接。

流量值

Sankey图中的每个链接表示从源节点到目标节点的流。对于水平Sankey图，流向是从左到右，对于垂直图，流向是从上到下。每个链接的粗细取决于从源节点到宿节点的流量。累积流量值可以显示在节点上。

流量值link通过value参数在对象内部定义。

突出特点

方向

Sankey图的方向可以是水平或垂直。为此，请将orientation属性的值分别设置为horizontal或vertical。默认情况下，它设置为horizontal。

使用下面给出的代码：
{
“chart”: {
“orientation”: “vertical”;
}
}
该图表如下图所示：

无节点Sankey

如果在Sankey Diagram中将nodeWidth属性的值设置为对象0下的chart，则不会渲染节点。结果图表仅显示链接，称为“无节点Sankey”。
使用下面给出的代码：
{
“chart”: {
“nodeWidth”: “0”;
}
}
该图表如下图所示：

混合模式

Sankey图支持blend链接颜色的模式。要应用此模式，需要将linkColor属性的值设置为blend。当您这样做时，由源节点和目标节点的颜色组合而成的渐变将应用于链接。您可以在chart对象下提及这一点，以将混合模式应用于图表中的每个链接。否则，您可以在links对象下提及它，以将其应用于特定链接。

使用下面给出的代码：
{
“chart”: {
“linkColor”: “blend”;
}
}
拖动
您可以在垂直方向上将Sankey图中的节点拖动到水平Sankey，在水平方向上拖动以垂直Sankey。默认情况下，Sankey图启用了拖动功能。要禁用拖动，请将enableDrag属性的值设置为0。

使用下面给出的代码：
{
“chart”: {
“enableDrag”: “0”
}
}
链接曲率
您可以设置呈现图表中链接的角度。要做到这一点，该值设置linkCurvature属性0，1或它们之间的任何十进制值。请注意，如果将值设置为0，则链接将呈现为直线，如果将其设置为1，则将以最大可能的曲率呈现。

您可以在图表中全局设置所有链接的曲率。为此，linkCurvature如上所述设置属性的值，并将其包括在chart对象中。但是，如果要设置单个链接的曲率，请curvature如上所述设置属性的值，并将其包括在该links特定链接的对象内。

如果同时全局（在chart对象下）和局部（在link对象下）设置链接的曲率，则局部值将覆盖全局值。

请参阅下面给出的代码：
{
“chart”: {
“linkCurvature”: “0”
}
}
该图表如下图所示：

自定义Sankey图

在以下各节中，您将在Sankey Diagram中看到用于自定义节点和链接的选项。

节点定制
设置节点宽度

您可以设置图表上节点的宽度。为此，请将nodeWidth属性的值设置为所需的值。
使用下面给出的代码：
{
“chart”: {
“nodeWidth”: “5”;
}
}
位置节点标签

您可以将节点标签放置在节点的开头，结尾或内部。为此，请将nodeLabelPosition属性的值设置为以下之一：
将其设置为start，将其放置在节点的左侧。
将其设置为right，以将其放置在节点的右侧。
默认情况下，nodeLabelPosition的值设置为end。
仅当showNodeLabelsvalue属性的值设置为时，才能放置Sankey图的节点标签1。此属性的默认值为1。
使用下面给出的代码：
{
“chart”: {
“nodeLabelPosition”: “right”
}
}
隐藏节点标签
如果节点的标签在Sankey图表中造成混乱，则FusionCharts允许您隐藏图表中的所有标签。为此，请将showNodeLabels属性设置为0。

请参考下面的代码：
{
“chart”: {
“showNodeLabels”: “0”
}
}
要隐藏节点的特定标签，请将showLabelattribute的值设置为0。showLabel应在nodes数组内部调用该属性。
请参考下面的代码：
{
“chart”: { },
“nodes”: [{
“label”: “Netherlands”,
“showLabel”: “0” //Disable Label of a particular node
}]
}
显示节点值
要在图表中显示节点值，请将showNodeValues属性的值设置为1。默认情况下，其值设置为0。

使用下面给出的代码：
{
“chart”: {