JavaScript图表工具FusionCharts入门教程(41)：如何创建Sankey流程图

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数据中，以”<attributeName>”: “<value>”格式设置属性及其对应的值。
• 使用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": {        "showNodeValues": "1"    }}

旋转节点标签

您可以将节点标签旋转到垂直位置，而不是默认的水平位置。为此，请将rotateNodeLabels属性的值设置为1。默认情况下，其值设置为0。

使用下面给出的代码：

{    "chart": {        "rotateNodeLabels": "1"    }}

设置节点之间的填充

您可以在连续的节点之间添加空格，以使图表看起来不太混乱。它将增加水平Sankey中两个连续节点之间的垂直空间，以及垂直Sankey中两个节点之间的水平空间。

您可以在连续的节点之间添加空格，以使图表看起来不太混乱。为此，请将nodeSpacing属性的值设置为所需的值

使用下面给出的代码：

{    "chart": {        "nodeSpacing": "10"    }}

配置节点松弛

您可以将Sankey Diagram中的节点拖离其他节点，以引起注意。在水平Sankey图中，您可以在垂直方向上拖动节点。在垂直Sankey图中，您可以在水平方向上拖动节点。默认情况下，Sankey图将重新定位节点，并在必要时在节点之间引入一些空间，以避免重叠。此行为由nodeRelaxation属性控制。默认情况下，该属性的值设置为1。

您可以通过将nodeRelaxation属性的值设置为来禁用此行为0。

使用下面给出的代码：

{    "chart": {        "nodeRelaxation": "0"    }}

该图表如下图所示：

节点化妆品

您可以将以下定制应用于节点的外观。

定义nodes数组以指定各个节点级别的节点修饰符。

设置节点颜色

您可以跨Sankey图设置所有节点的颜色。为此，请将nodeColor属性的值设置为所需颜色的十六进制值，并将其包括在chart对象中。但是，如果要设置单个节点的颜色，则将color属性的值设置为所需颜色的十六进制代码，并将其包括在该nodes特定节点的对象内。

如果同时全局（在chart对象下）和局部（在node对象下）设置节点的颜色，则局部值将覆盖全局值。

请参阅下面给出的代码：

{    "chart": {        "nodeColor": "#FFA816" //Applied to all the nodes in the diagram    },    "nodes": [{        "label": "China",        "color": "#ff0000" //Applied only to node of China    }]}

设置节点透明度

您可以在图表中全局设置所有节点的透明度。为此，请将nodeAlpha属性的值设置在0（透明）和100（不透明）之间，并将其包含在chart对象中。另一方面，如果要设置单个节点的透明度，请alpha在0（透明）和100（不透明）之间设置属性的值，并将其包括在该nodes特定节点的对象内。

注意：如果同时在全局（在chart对象下）和本地（在node对象下）设置节点的透明度，则局部值将覆盖全局值。

请参阅下面给出的代码：

{    "chart": {        "nodeAlpha": "50" //Applied to all the nodes in the diagram    },    "nodes": [{        "label": "China",        "alpha": "100" //Applied only to node of China    }]}

节点标签设置

您可以对节点标签应用一系列修饰。它们在下面列出：

• 使用nodeLabelFont属性设置节点标签文本的字体。
• 使用nodeLabelFontColor属性设置节点标签文本的颜色。
• 使用属性设置节点标签的透明度（介于0透明和100不透明之间）nodeLabelAlpha。
• 使用nodeLabelBgColor属性设置节点标签的背景色。
• 使用nodeLabelBorderColor属性设置节点标签的边框颜色。
• 使用nodeLabelBorderColor属性设置节点标签的边框厚度。
• 使用该nodeLabelFontSize属性设置节点标签文本的字体大小。
• 使用该nodeLabelFontBold属性将节点标签文本的字体样式设置为粗体。
• 使用该nodeLabelFontItalic属性将节点标签文本的字体样式设置为斜体。
• 使用nodeLabelBorderRadius属性设置节点标签的边界半径。
• 使用nodeLabelBorderPadding属性设置节点标签边框和节点标签之间的间隔。
• 使用该nodeLabelBorderDashed属性将节点标签边框样式设置为虚线。
• 使用该nodeLabelBorderDashLen属性设置节点标签边框破折 的长度。请注意，仅当将该nodeLabelBorderDashed属性应用于节点时，此属性才有效。
• 使用该nodeLabelBorderDashGap属性设置节点标签边框破折 之间的间隙长度。请注意，仅当将该nodeLabelBorderDashed属性应用于节点时，此属性才有效。
• 设置标签以使用inheritLabelColorFromNode属性从节点继承其颜色。

使用下面给出的代码将上面列出的自定义应用于图表：

{    "chart": {        "nodeLabelFont": "Arial",        "nodeLabelFontColor": "#000fff",        "nodeLabelAlpha": "50",        "nodeLabelBgColor": "#ff0000",        "nodeLabelBorderColor": "#000000",        "nodeLabelFontSize": "13",        "nodeLabelFontBold": "1",        "nodeLabelFontItalic": "1",        "nodeLabelBorderRadius": "5",        "nodeLabelBorderPadding": "5",        "nodeLabelBorderDashed": "1",        "nodeLabelBorderDashLen": "3",        "nodeLabelBorderDashGap": "2",        "inheritLabelColorFromNode": "1"    }}

链接自定义

直链Sankey

FusionCharts允许您向Sankey图添加直接链接，而不是默认链接。为此，请将linkCurvatureattribute的值设置为0。

该linkCurvature属性的默认值为1。

请参考下面的代码：

{    "chart": {        "linkCurvature": "0"    }}

设置节点和链接之间的填充

您可以在节点和链接之间添加空格，以使图表看起来不太混乱。为此，nodeLinkPadding以像素为单位设置值。

请参考下面的代码：

{    "chart": {        "nodeLinkPadding": "20"    }}

设置链接颜色

您可以使用linkColor属性来自定义链接的颜色。将其值设置为以下选项之一：

• 对其进行设置，source以使链接继承其源节点或该from节点的颜色。
• 对其进行设置，target以使链接从目标节点或该to节点继承其颜色。
• 设置它可以blend组合链接的源节点和目标节点的颜色，并将其作为渐变应用于链接。
• 将其设置为颜色的十六进制值，以将该颜色应用于链接。

您可以全局设置所有链接的颜色。为此，请将linkColor属性的值设置为上述选项之一，并将其包括在chart对象中。但是，如果要设置单个链接的颜色，请将color属性的值设置为上面给出的选项之一，并将其包括在该links特定链接的对象内。

如果同时全局（在chart对象下）和本地（在link对象下）设置链接的颜色，则本地值将覆盖全局值。

请参阅下面给出的代码：

{    "chart": {        "linkColor": "#FFA817"    },    "links": [        {          "from": "Germany",          "to": "European Union",          "value": 1468990,          "color": "#ff0000"        }    ]}

设置链接透明度

您可以全局设置图表中所有链接的透明度。为此，请将linkAlpha属性的值设置在0（透明）和100（不透明）之间，并将其包含在chart对象中。但是，如果要设置单个链接的透明度，请alpha在0（透明）和100（不透明）之间设置属性的值，并将其包括在该link特定链接的对象内。

如果同时设置全局（在chart对象下）和本地（在link对象下）的链接的透明度，则本地值将覆盖全局值。

请参阅下面给出的代码：

{    "chart": {        "linkAlpha": "20"    },    "links": [        {          "from": "Germany",          "to": "European Union",          "value": 1468990,          "alpha": "100"        }    ]}

自定义工具提示

您可以自定义节点和链接的工具提示，以在用户将鼠标悬停在节点或链接上时显示更多上下文信息。要做到这一点，你可以使用plotToolText，linkToolText或者toolText属性与一些支持宏一起。

使用 plotToolText

该plotToolText属性在全局级别起作用，它为图表中的所有节点定义了一个工具提示模板。对于价值plotToolText属性是由宏的模板，模板也可以包含纯文本和喜欢各种内嵌HTML标签br，strong，em，和b。

对于热平衡图，plotToolText支持以下宏$label，$nodeValue，$nodeDataValue，$plotFillColor，$plotFillAlpha，和$plotIdentifier。有关宏的更多信息，请参见“宏列表”。

请参考下面的代码：

{    "chart": {        "plotToolText": '$plotfillcolor $label'    }}

使用 linkToolText

该linkToolText属性在全局级别起作用，它为图表中的所有链接定义了一个工具提示模板。对于价值linkToolText属性是由宏的模板，模板也可以包含纯文本和喜欢各种内嵌HTML标签br，strong，em，和b。

对于热平衡图，linkToolText支持以下宏$from，$to，$linkValue，$linkDataValue，$fromPlotIdentifier，$toPlotIdentifier，和$flowDirection。有关宏的更多信息，请参见“宏列表”。

请参考下面的代码：

{    "chart": {        "linkToolText": '$from To $to $linkValue'    }}

使用 toolText

该toolText属性在链接和节点的本地级别起作用，它为图表中的各个链接或节点定义了一个工具提示模板。对于价值toolText属性是由宏的模板，模板也可以包含纯文本和喜欢各种内嵌HTML标签br，strong，em，和b。

当使用toolText中的节点，它使用下面的宏：$label，$nodeValue，$nodeDataValue，$plotFillColor，$plotFillAlpha。有关宏的更多信息，请参见“宏列表”。

请参考下面的代码：

{    "nodes": [{        "plotToolText": '$label exports $nodeDataValue'    }]}

当使用toolText中的链接，它使用下面的宏：$from，$to，$linkValue，$linkDataValue，$fromPlotIdentifier，$toPlotIdentifier，和$flowDirection。有关宏的更多信息，请参见“宏列表”。

请参考下面的代码：

{    "links": [{         "toolText": 'From: $from To: $to $linkValue'    }]}

---

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：