JavaScript圖表工具FusionCharts入門教程(41)：如何創建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圖表。
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";
}
}
該圖表如下圖所示：
無節點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 Diagram中看到用于自定義節點和鏈接的選項。
節點定制
設置節點寬度
您可以設置圖表上節點的寬度。為此，請將nodeWidth屬性的值設置為所需的值。
使用下面給出的代碼：
{
"chart": {
"nodeWidth": "5";
}
}
位置節點標簽
您可以將節點標簽放置在節點的開頭，結尾或內部。為此，請將nodeLabelPosition屬性的值設置為以下之一：
- 將其設置為start，將其放置在節點的左側。
- 將其設置為right，以將其放置在節點的右側。
僅當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組合鏈接的源節點和目標節點的顏色，并將其作為漸變應用于鏈接。
- 將其設置為顏色的十六進制值，以將該顏色應用于鏈接。
如果同時全局（在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正版授權，或了解更多產品信息請點擊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線