JavaScript圖表工具FusionCharts入門教程(41)：如何創(chuàng)建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來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

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

要創(chuàng)建sankey圖，請遵循以下步驟：

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

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

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

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

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

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

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

節(jié)點

節(jié)點是流程圖中的關(guān)鍵關(guān)頭。每個節(jié)點可以具有流資源的流入和流出。在我們的Sankey圖中，它們當前由矩形表示?？梢赃M行大量的自定義，包括大小，顏色，標簽，填充等。

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

要自定義節(jié)點，請定義“ nodes”對象并為每個節(jié)點指定參數(shù)label。

鏈接

鏈接是連接節(jié)點的路徑。他們?yōu)榱鞒讨该鞣较?。它們本質(zhì)上是流體，并根據(jù)它們所連接的節(jié)點進行成形（或彎曲）。每個鏈接都應(yīng)該知道它的源節(jié)點和宿節(jié)點。流值由鏈接的寬度編碼?？梢愿鶕?jù)顏色，曲率和值定制它們。

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

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

流量值

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

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

突出特點

方向

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

使用下面給出的代碼：

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

該圖表如下圖所示：

無節(jié)點Sankey

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

使用下面給出的代碼：

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

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

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

使用下面給出的代碼：

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

拖動

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

使用下面給出的代碼：

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

鏈接曲率

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

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

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

請參閱下面給出的代碼：

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

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

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

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

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

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

位置節(jié)點標簽

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

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

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

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

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

隱藏節(jié)點標簽

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

請參考下面的代碼：

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

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

請參考下面的代碼：

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

顯示節(jié)點值

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

使用下面給出的代碼：

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

旋轉(zhuǎn)節(jié)點標簽

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

使用下面給出的代碼：

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

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

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

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

使用下面給出的代碼：

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

配置節(jié)點松弛

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

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

使用下面給出的代碼：

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

該圖表如下圖所示：

節(jié)點化妝品

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

定義nodes數(shù)組以指定各個節(jié)點級別的節(jié)點修飾符。

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

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

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

請參閱下面給出的代碼：

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

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

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

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

請參閱下面給出的代碼：

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

節(jié)點標簽設(shè)置

您可以對節(jié)點標簽應(yīng)用一系列修飾。它們在下面列出：

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

使用下面給出的代碼將上面列出的自定義應(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圖添加直接鏈接，而不是默認鏈接。為此，請將linkCurvatureattribute的值設(shè)置為0。

該linkCurvature屬性的默認值為1。

請參考下面的代碼：

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

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

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

請參考下面的代碼：

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

設(shè)置鏈接顏色

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

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

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

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

請參閱下面給出的代碼：

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

設(shè)置鏈接透明度

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

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

請參閱下面給出的代碼：

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

自定義工具提示

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

使用 plotToolText

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

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

請參考下面的代碼：

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

使用 linkToolText

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

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

請參考下面的代碼：

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

使用 toolText

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

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

請參考下面的代碼：

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

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

請參考下面的代碼：

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

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊【咨詢在線客服】