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圖中有19個節點。鏈接連接彼此相關的任何兩個節點（即，在它們之間發生流）。如果將鼠標懸停在節點上，將看到與該節點關聯的所有鏈接（或關系）。懸停在鏈接上將顯示兩個都是與之關聯的節點。

重要概念相關的熱平衡圖

Sankey圖可用于表示流數據。使用連接鏈接從一個節點流到另一個節點。整個圖中不應重復任何節點，并且一對連接節點之間最多應有一個鏈接。

下面簡要介紹一些關鍵概念：

節點

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

每個節點在Sankey圖中應該只出現一次。

要自定義節點，請定義“ nodes”對象并為每個節點指定參數label。

鏈接

鏈接是連接節點的路徑。他們為流程指明方向。它們本質上是流體，并根據它們所連接的節點進行成形（或彎曲）。每個鏈接都應該知道它的源節點和宿節點。流值由鏈接的寬度編碼。可以根據顏色，曲率和值定制它們。

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

一對節點之間應該有最大的鏈接。

流量值

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

流量值link通過value參數在對象內部定義。

突出特點

方向

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

使用下面給出的代碼：

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

使用下面給出的代碼：

{
  "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 Diagram中看到用于自定義節點和鏈接的選項。

節點定制
設置節點寬度

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

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

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

• 將其設置為start，將其放置在節點的左側。
• 將其設置為right，以將其放置在節點的右側。

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

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

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

請參考下面的代碼：

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

請參考下面的代碼：

{
    "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組合鏈接的源節點和目標節點的顏色，并將其作為漸變應用于鏈接。
• 將其設置為顏色的十六進制值，以將該顏色應用于鏈接。

如果同時全局（在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屬性是由宏的模板，模板也可以包含純文本和喜歡各種內嵌HTML標簽br，strong，em，和b。

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

請參考下面的代碼：

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

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

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

請參考下面的代碼：

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

請參考下面的代碼：

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

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊