JavaScript圖表工具FusionCharts入門教程(41)：如何創(chuàng)建Sankey流程圖

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

Sankey圖是一種流程圖，描述了從一個(gè)節(jié)點(diǎn)到另一個(gè)節(jié)點(diǎn)的資源（材料，能源，成本等）流。每個(gè)流的起點(diǎn)和終點(diǎn)稱為節(jié)點(diǎn)，它們之間的流路徑稱為鏈接。一對(duì)節(jié)點(diǎn)之間只能有一個(gè)鏈接。每對(duì)節(jié)點(diǎn)之間的流的值由鏈接的寬度編碼。鏈接的顏色有助于與它們各自的節(jié)點(diǎn)建立視覺映射。

要?jiǎng)?chuàng)建sankey圖，請(qǐng)遵循以下步驟：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對(duì)應(yīng)的值。
• 使用type屬性指定圖表類型。要渲染sankey圖，請(qǐng)?jiān)O(shè)置sankey。
• 使用renderAt屬性設(shè)置容器對(duì)象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對(duì)象的數(shù)據(jù)類型（JSON / XML）。

有關(guān)屬性的詳細(xì)列表，請(qǐng)參考sankey圖的圖表屬性頁面。

可以以水平布局（默認(rèn)）或垂直布局繪制Sankey圖。帶有水平方向的Sankey圖如下所示：

上面提供的Sankey圖中有19個(gè)節(jié)點(diǎn)。鏈接連接彼此相關(guān)的任何兩個(gè)節(jié)點(diǎn)（即，在它們之間發(fā)生流）。如果將鼠標(biāo)懸停在節(jié)點(diǎn)上，將看到與該節(jié)點(diǎn)關(guān)聯(lián)的所有鏈接（或關(guān)系）。懸停在鏈接上將顯示兩個(gè)都是與之關(guān)聯(lián)的節(jié)點(diǎn)。

重要概念相關(guān)的熱平衡圖

Sankey圖可用于表示流數(shù)據(jù)。使用連接鏈接從一個(gè)節(jié)點(diǎn)流到另一個(gè)節(jié)點(diǎn)。整個(gè)圖中不應(yīng)重復(fù)任何節(jié)點(diǎn)，并且一對(duì)連接節(jié)點(diǎn)之間最多應(yīng)有一個(gè)鏈接。

下面簡要介紹一些關(guān)鍵概念：

節(jié)點(diǎn)

節(jié)點(diǎn)是流程圖中的關(guān)鍵關(guān)頭。每個(gè)節(jié)點(diǎn)可以具有流資源的流入和流出。在我們的Sankey圖中，它們當(dāng)前由矩形表示。可以進(jìn)行大量的自定義，包括大小，顏色，標(biāo)簽，填充等。

每個(gè)節(jié)點(diǎn)在Sankey圖中應(yīng)該只出現(xiàn)一次。

要自定義節(jié)點(diǎn)，請(qǐng)定義“ nodes”對(duì)象并為每個(gè)節(jié)點(diǎn)指定參數(shù)label。

鏈接

鏈接是連接節(jié)點(diǎn)的路徑。他們?yōu)榱鞒讨该鞣较颉Ｋ鼈儽举|(zhì)上是流體，并根據(jù)它們所連接的節(jié)點(diǎn)進(jìn)行成形（或彎曲）。每個(gè)鏈接都應(yīng)該知道它的源節(jié)點(diǎn)和宿節(jié)點(diǎn)。流值由鏈接的寬度編碼。可以根據(jù)顏色，曲率和值定制它們。

如果鏈接沒有“從”和“到”節(jié)點(diǎn)，則不會(huì)繪制該鏈接。

一對(duì)節(jié)點(diǎn)之間應(yīng)該有最大的鏈接。

流量值

Sankey圖中的每個(gè)鏈接表示從源節(jié)點(diǎn)到目標(biāo)節(jié)點(diǎn)的流。對(duì)于水平Sankey圖，流向是從左到右，對(duì)于垂直圖，流向是從上到下。每個(gè)鏈接的粗細(xì)取決于從源節(jié)點(diǎn)到宿節(jié)點(diǎn)的流量。累積流量值可以顯示在節(jié)點(diǎn)上。

流量值link通過value參數(shù)在對(duì)象內(nèi)部定義。

突出特點(diǎn)

方向

Sankey圖的方向可以是水平或垂直。為此，請(qǐng)將orientation屬性的值分別設(shè)置為horizontal或vertical。默認(rèn)情況下，它設(shè)置為horizontal。

使用下面給出的代碼：

{
  "chart": {
    "orientation": "vertical";
  }
}

該圖表如下圖所示：

無節(jié)點(diǎn)Sankey

如果在Sankey Diagram中將nodeWidth屬性的值設(shè)置為對(duì)象0下的chart，則不會(huì)渲染節(jié)點(diǎn)。結(jié)果圖表僅顯示鏈接，稱為“無節(jié)點(diǎn)Sankey”。

使用下面給出的代碼：

{
  "chart": {
    "nodeWidth": "0";
  }
}

該圖表如下圖所示： 混合模式

Sankey圖支持blend鏈接顏色的模式。要應(yīng)用此模式，需要將linkColor屬性的值設(shè)置為blend。當(dāng)您這樣做時(shí)，由源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的顏色組合而成的漸變將應(yīng)用于鏈接。您可以在chart對(duì)象下提及這一點(diǎn)，以將混合模式應(yīng)用于圖表中的每個(gè)鏈接。否則，您可以在links對(duì)象下提及它，以將其應(yīng)用于特定鏈接。

使用下面給出的代碼：

{
  "chart": {
    "linkColor": "blend";
  }
}

拖動(dòng)

您可以在垂直方向上將Sankey圖中的節(jié)點(diǎn)拖動(dòng)到水平Sankey，在水平方向上拖動(dòng)以垂直Sankey。默認(rèn)情況下，Sankey圖啟用了拖動(dòng)功能。要禁用拖動(dòng)，請(qǐng)將enableDrag屬性的值設(shè)置為0。

使用下面給出的代碼：

{
    "chart": {
        "enableDrag": "0"
    }
}

鏈接曲率

您可以設(shè)置呈現(xiàn)圖表中鏈接的角度。要做到這一點(diǎn)，該值設(shè)置linkCurvature屬性0，1或它們之間的任何十進(jìn)制值。請(qǐng)注意，如果將值設(shè)置為0，則鏈接將呈現(xiàn)為直線，如果將其設(shè)置為1，則將以最大可能的曲率呈現(xiàn)。

您可以在圖表中全局設(shè)置所有鏈接的曲率。為此，linkCurvature如上所述設(shè)置屬性的值，并將其包括在chart對(duì)象中。但是，如果要設(shè)置單個(gè)鏈接的曲率，請(qǐng)curvature如上所述設(shè)置屬性的值，并將其包括在該links特定鏈接的對(duì)象內(nèi)。

如果同時(shí)全局（在chart對(duì)象下）和局部（在link對(duì)象下）設(shè)置鏈接的曲率，則局部值將覆蓋全局值。

請(qǐng)參閱下面給出的代碼：

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

該圖表如下圖所示： 自定義Sankey圖

在以下各節(jié)中，您將在Sankey Diagram中看到用于自定義節(jié)點(diǎn)和鏈接的選項(xiàng)。

節(jié)點(diǎn)定制
設(shè)置節(jié)點(diǎn)寬度

您可以設(shè)置圖表上節(jié)點(diǎn)的寬度。為此，請(qǐng)將nodeWidth屬性的值設(shè)置為所需的值。
使用下面給出的代碼：

{
  "chart": {
    "nodeWidth": "5";
  }
}

位置節(jié)點(diǎn)標(biāo)簽

您可以將節(jié)點(diǎn)標(biāo)簽放置在節(jié)點(diǎn)的開頭，結(jié)尾或內(nèi)部。為此，請(qǐng)將nodeLabelPosition屬性的值設(shè)置為以下之一：

• 將其設(shè)置為start，將其放置在節(jié)點(diǎn)的左側(cè)。
• 將其設(shè)置為right，以將其放置在節(jié)點(diǎn)的右側(cè)。

默認(rèn)情況下，nodeLabelPosition的值設(shè)置為end。

僅當(dāng)showNodeLabelsvalue屬性的值設(shè)置為時(shí)，才能放置Sankey圖的節(jié)點(diǎn)標(biāo)簽1。此屬性的默認(rèn)值為1。
使用下面給出的代碼：

{
    "chart": {
        "nodeLabelPosition": "right"
    }
}

隱藏節(jié)點(diǎn)標(biāo)簽

如果節(jié)點(diǎn)的標(biāo)簽在Sankey圖表中造成混亂，則FusionCharts允許您隱藏圖表中的所有標(biāo)簽。為此，請(qǐng)將showNodeLabels屬性設(shè)置為0。

請(qǐng)參考下面的代碼：

{
    "chart": {
        "showNodeLabels": "0"
    }
}

要隱藏節(jié)點(diǎn)的特定標(biāo)簽，請(qǐng)將showLabelattribute的值設(shè)置為0。showLabel應(yīng)在nodes數(shù)組內(nèi)部調(diào)用該屬性。

請(qǐng)參考下面的代碼：

{
    "chart": { },
    "nodes": [{
        "label": "Netherlands",
        "showLabel": "0" //Disable Label of a particular node
    }]
}

顯示節(jié)點(diǎn)值

要在圖表中顯示節(jié)點(diǎn)值，請(qǐng)將showNodeValues屬性的值設(shè)置為1。默認(rèn)情況下，其值設(shè)置為0。

使用下面給出的代碼：

{
    "chart": {
        "showNodeValues": "1"
    }
}

旋轉(zhuǎn)節(jié)點(diǎn)標(biāo)簽

您可以將節(jié)點(diǎn)標(biāo)簽旋轉(zhuǎn)到垂直位置，而不是默認(rèn)的水平位置。為此，請(qǐng)將rotateNodeLabels屬性的值設(shè)置為1。默認(rèn)情況下，其值設(shè)置為0。

使用下面給出的代碼：

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

設(shè)置節(jié)點(diǎn)之間的填充

您可以在連續(xù)的節(jié)點(diǎn)之間添加空格，以使圖表看起來不太混亂。它將增加水平Sankey中兩個(gè)連續(xù)節(jié)點(diǎn)之間的垂直空間，以及垂直Sankey中兩個(gè)節(jié)點(diǎn)之間的水平空間。

您可以在連續(xù)的節(jié)點(diǎn)之間添加空格，以使圖表看起來不太混亂。為此，請(qǐng)將nodeSpacing屬性的值設(shè)置為所需的值

使用下面給出的代碼：

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

配置節(jié)點(diǎn)松弛

您可以將Sankey Diagram中的節(jié)點(diǎn)拖離其他節(jié)點(diǎn)，以引起注意。在水平Sankey圖中，您可以在垂直方向上拖動(dòng)節(jié)點(diǎn)。在垂直Sankey圖中，您可以在水平方向上拖動(dòng)節(jié)點(diǎn)。默認(rèn)情況下，Sankey圖將重新定位節(jié)點(diǎn)，并在必要時(shí)在節(jié)點(diǎn)之間引入一些空間，以避免重疊。此行為由nodeRelaxation屬性控制。默認(rèn)情況下，該屬性的值設(shè)置為1。

您可以通過將nodeRelaxation屬性的值設(shè)置為來禁用此行為0。

使用下面給出的代碼：

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

該圖表如下圖所示：

節(jié)點(diǎn)化妝品

您可以將以下定制應(yīng)用于節(jié)點(diǎn)的外觀。

定義nodes數(shù)組以指定各個(gè)節(jié)點(diǎn)級(jí)別的節(jié)點(diǎn)修飾符。

設(shè)置節(jié)點(diǎn)顏色

您可以跨Sankey圖設(shè)置所有節(jié)點(diǎn)的顏色。為此，請(qǐng)將nodeColor屬性的值設(shè)置為所需顏色的十六進(jìn)制值，并將其包括在chart對(duì)象中。但是，如果要設(shè)置單個(gè)節(jié)點(diǎn)的顏色，則將color屬性的值設(shè)置為所需顏色的十六進(jìn)制代碼，并將其包括在該nodes特定節(jié)點(diǎn)的對(duì)象內(nèi)。

如果同時(shí)全局（在chart對(duì)象下）和局部（在node對(duì)象下）設(shè)置節(jié)點(diǎn)的顏色，則局部值將覆蓋全局值。

請(qǐng)參閱下面給出的代碼：

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

設(shè)置節(jié)點(diǎn)透明度

您可以在圖表中全局設(shè)置所有節(jié)點(diǎn)的透明度。為此，請(qǐng)將nodeAlpha屬性的值設(shè)置在0（透明）和100（不透明）之間，并將其包含在chart對(duì)象中。另一方面，如果要設(shè)置單個(gè)節(jié)點(diǎn)的透明度，請(qǐng)alpha在0（透明）和100（不透明）之間設(shè)置屬性的值，并將其包括在該nodes特定節(jié)點(diǎn)的對(duì)象內(nèi)。

注意：如果同時(shí)在全局（在chart對(duì)象下）和本地（在node對(duì)象下）設(shè)置節(jié)點(diǎn)的透明度，則局部值將覆蓋全局值。

請(qǐng)參閱下面給出的代碼：

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

節(jié)點(diǎn)標(biāo)簽設(shè)置

您可以對(duì)節(jié)點(diǎn)標(biāo)簽應(yīng)用一系列修飾。它們?cè)谙旅媪谐觯?/span>

• 使用nodeLabelFont屬性設(shè)置節(jié)點(diǎn)標(biāo)簽文本的字體。
• 使用nodeLabelFontColor屬性設(shè)置節(jié)點(diǎn)標(biāo)簽文本的顏色。
• 使用屬性設(shè)置節(jié)點(diǎn)標(biāo)簽的透明度（介于0透明和100不透明之間）nodeLabelAlpha。
• 使用nodeLabelBgColor屬性設(shè)置節(jié)點(diǎn)標(biāo)簽的背景色。
• 使用nodeLabelBorderColor屬性設(shè)置節(jié)點(diǎn)標(biāo)簽的邊框顏色。
• 使用nodeLabelBorderColor屬性設(shè)置節(jié)點(diǎn)標(biāo)簽的邊框厚度。
• 使用該nodeLabelFontSize屬性設(shè)置節(jié)點(diǎn)標(biāo)簽文本的字體大小。
• 使用該nodeLabelFontBold屬性將節(jié)點(diǎn)標(biāo)簽文本的字體樣式設(shè)置為粗體。
• 使用該nodeLabelFontItalic屬性將節(jié)點(diǎn)標(biāo)簽文本的字體樣式設(shè)置為斜體。
• 使用nodeLabelBorderRadius屬性設(shè)置節(jié)點(diǎn)標(biāo)簽的邊界半徑。
• 使用nodeLabelBorderPadding屬性設(shè)置節(jié)點(diǎn)標(biāo)簽邊框和節(jié)點(diǎn)標(biāo)簽之間的間隔。
• 使用該nodeLabelBorderDashed屬性將節(jié)點(diǎn)標(biāo)簽邊框樣式設(shè)置為虛線。
• 使用該nodeLabelBorderDashLen屬性設(shè)置節(jié)點(diǎn)標(biāo)簽邊框破折號(hào)的長度。請(qǐng)注意，僅當(dāng)將該nodeLabelBorderDashed屬性應(yīng)用于節(jié)點(diǎn)時(shí)，此屬性才有效。
• 使用該nodeLabelBorderDashGap屬性設(shè)置節(jié)點(diǎn)標(biāo)簽邊框破折號(hào)之間的間隙長度。請(qǐng)注意，僅當(dāng)將該nodeLabelBorderDashed屬性應(yīng)用于節(jié)點(diǎn)時(shí)，此屬性才有效。
• 設(shè)置標(biāo)簽以使用inheritLabelColorFromNode屬性從節(jié)點(diǎn)繼承其顏色。

使用下面給出的代碼將上面列出的自定義應(yīng)用于圖表：

{
    "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圖添加直接鏈接，而不是默認(rèn)鏈接。為此，請(qǐng)將linkCurvatureattribute的值設(shè)置為0。

該linkCurvature屬性的默認(rèn)值為1。

請(qǐng)參考下面的代碼：

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

設(shè)置節(jié)點(diǎn)和鏈接之間的填充

您可以在節(jié)點(diǎn)和鏈接之間添加空格，以使圖表看起來不太混亂。為此，nodeLinkPadding以像素為單位設(shè)置值。

請(qǐng)參考下面的代碼：

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

設(shè)置鏈接顏色

您可以使用linkColor屬性來自定義鏈接的顏色。將其值設(shè)置為以下選項(xiàng)之一：

• 對(duì)其進(jìn)行設(shè)置，source以使鏈接繼承其源節(jié)點(diǎn)或該from節(jié)點(diǎn)的顏色。
• 對(duì)其進(jìn)行設(shè)置，target以使鏈接從目標(biāo)節(jié)點(diǎn)或該to節(jié)點(diǎn)繼承其顏色。
• 設(shè)置它可以blend組合鏈接的源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的顏色，并將其作為漸變應(yīng)用于鏈接。
• 將其設(shè)置為顏色的十六進(jìn)制值，以將該顏色應(yīng)用于鏈接。

您可以全局設(shè)置所有鏈接的顏色。為此，請(qǐng)將linkColor屬性的值設(shè)置為上述選項(xiàng)之一，并將其包括在chart對(duì)象中。但是，如果要設(shè)置單個(gè)鏈接的顏色，請(qǐng)將color屬性的值設(shè)置為上面給出的選項(xiàng)之一，并將其包括在該links特定鏈接的對(duì)象內(nèi)。

如果同時(shí)全局（在chart對(duì)象下）和本地（在link對(duì)象下）設(shè)置鏈接的顏色，則本地值將覆蓋全局值。

請(qǐng)參閱下面給出的代碼：

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

設(shè)置鏈接透明度

您可以全局設(shè)置圖表中所有鏈接的透明度。為此，請(qǐng)將linkAlpha屬性的值設(shè)置在0（透明）和100（不透明）之間，并將其包含在chart對(duì)象中。但是，如果要設(shè)置單個(gè)鏈接的透明度，請(qǐng)alpha在0（透明）和100（不透明）之間設(shè)置屬性的值，并將其包括在該link特定鏈接的對(duì)象內(nèi)。

如果同時(shí)設(shè)置全局（在chart對(duì)象下）和本地（在link對(duì)象下）的鏈接的透明度，則本地值將覆蓋全局值。

請(qǐng)參閱下面給出的代碼：

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

自定義工具提示

您可以自定義節(jié)點(diǎn)和鏈接的工具提示，以在用戶將鼠標(biāo)懸停在節(jié)點(diǎn)或鏈接上時(shí)顯示更多上下文信息。要做到這一點(diǎn)，你可以使用plotToolText，linkToolText或者toolText屬性與一些支持宏一起。

使用 plotToolText

該plotToolText屬性在全局級(jí)別起作用，它為圖表中的所有節(jié)點(diǎn)定義了一個(gè)工具提示模板。對(duì)于價(jià)值plotToolText屬性是由宏的模板，模板也可以包含純文本和喜歡各種內(nèi)嵌HTML標(biāo)簽br，strong，em，和b。

對(duì)于熱平衡圖，plotToolText支持以下宏$label，$nodeValue，$nodeDataValue，$plotFillColor，$plotFillAlpha，和$plotIdentifier。有關(guān)宏的更多信息，請(qǐng)參見“宏列表”。

請(qǐng)參考下面的代碼：

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

使用 linkToolText

該linkToolText屬性在全局級(jí)別起作用，它為圖表中的所有鏈接定義了一個(gè)工具提示模板。對(duì)于價(jià)值linkToolText屬性是由宏的模板，模板也可以包含純文本和喜歡各種內(nèi)嵌HTML標(biāo)簽br，strong，em，和b。

對(duì)于熱平衡圖，linkToolText支持以下宏$from，$to，$linkValue，$linkDataValue，$fromPlotIdentifier，$toPlotIdentifier，和$flowDirection。有關(guān)宏的更多信息，請(qǐng)參見“宏列表”。

請(qǐng)參考下面的代碼：

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

使用 toolText

該toolText屬性在鏈接和節(jié)點(diǎn)的本地級(jí)別起作用，它為圖表中的各個(gè)鏈接或節(jié)點(diǎn)定義了一個(gè)工具提示模板。對(duì)于價(jià)值toolText屬性是由宏的模板，模板也可以包含純文本和喜歡各種內(nèi)嵌HTML標(biāo)簽br，strong，em，和b。

當(dāng)使用toolText中的節(jié)點(diǎn)，它使用下面的宏：$label，$nodeValue，$nodeDataValue，$plotFillColor，$plotFillAlpha。有關(guān)宏的更多信息，請(qǐng)參見“宏列表”。

請(qǐng)參考下面的代碼：

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

當(dāng)使用toolText中的鏈接，它使用下面的宏：$from，$to，$linkValue，$linkDataValue，$fromPlotIdentifier，$toPlotIdentifier，和$flowDirection。有關(guān)宏的更多信息，請(qǐng)參見“宏列表”。

請(qǐng)參考下面的代碼：

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

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊