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最新版

和弦圖是表示過渡數據中特定實體之間的流關系的圖形方式。實體（稱為節點）沿圓形布局的圓周繪制。流關系（稱為鏈接）由連接節點的弧表示。鏈接根據過渡數據的主導規則著色。這是一種視覺上令人愉悅的方式，因此是數據可視化愛好者中的一種流行選擇。

和弦圖也稱為“徑向網絡圖”，“和弦布局”或“依賴輪”。

要創建和弦圖，請執行以下步驟：

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

一個簡單的和弦圖如下所示：

轉換前和轉換后

和弦圖表示過渡數據。過渡數據有兩種穩定狀態-過渡前和過渡后過渡。

讓我們考慮以下情況：兩個領先的電信運營商的客戶正在從一個切換到另一個，反之亦然。在客戶開始切換之前，電信運營商擁有的客戶數量是過渡前的狀態。切換客戶后，電信運營商擁有的客戶數量為過渡后狀態。節點弧的長度表示與該節點關聯的總價值（切換的客戶），因此受狀態或“模式”的影響。

缺省情況下，FusionCharts會在發布狀態下構建和弦圖。但是，您也可以構建預狀態和弦圖。

基于優勢鏈接的顏色

鏈接從其連接的節點中獲取派生顏色。默認情況下，流出值較小的節點為鏈接賦予顏色。如果兩個節點上的值相等，則鏈接將獲得兩個節點的漸變顏色。

FusionCharts中的和弦圖遵循數據的主導規則。其工作方式如下：

• 在前狀態弦圖中，流出量最小的節點是鏈接的主導端。在有關電信運營商的用例中，這適用于失去最少客戶的用戶。
• 在后期狀態和弦圖中，流入量最大的節點是鏈接的主導端。在有關電信運營商的用例中，這適用于獲得更多客戶的運營商。

在和弦圖中，links或連接通常稱為ribbons。

和弦圖的自定義

切換節點鏈接能見度

單擊和弦圖中的節點時，該節點將被禁用，并且與其關聯的鏈接也將被隱藏。這可以幫助您專注于在特定上下文中很重要的節點和鏈接。該行為由圖表級別enableToggle屬性控制，該屬性1默認設置為。您可以根據需要禁用該行為。為此，請將的值設置enableToggle為0。

該minNodeSize屬性控制禁用的節點可以占用的最小空間。

使用下面給出的代碼：

{
    "chart": {
        "enableToggle": "0"
    }
}

使用下面給出的代碼：

{
    "chart": {
        "nodeSpacing": "15"
    }
}

您可以指定圖表中所有節點的單個節點或整個節點的厚度。為此，請將所需值設置為attribute nodeThickness。
使用下面給出的代碼：

{
    "chart": {
        "nodeThickness": "15"
    }
}

{
    "chart": {
        "chordRadius": "100"
    }
}

節點標簽的位置可以設置為tangential（默認）outside，或inside。要手動放置節點標簽，請將所需位置設置為nodeLabelPosition屬性。

使用下面給出的代碼：

{
    "chart": {
        "nodeLabelPosition": "inside"
    }
}

您可以選擇不顯示節點標簽，以使圖表看起來不太混亂。為此，請將屬性的值設置showNodeLabels為0。
使用下面給出的代碼：

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

您可以設置起始角度，以指定弦弧應從圓形布局中的何處開始。為此，請設置startingAngle屬性為所需的角度。
使用下面給出的代碼：

{
    "chart": {
        "startingAngle": "120"
    }
}

您可以設置初始渲染時和弦圖將覆蓋的總角度。為此，請totalAngle在0和之間設置屬性的值360。
使用下面給出的代碼：

{
    "chart": {
        "totalAngle": "270"
    }
}

您可以在節點及其鏈接之間引入空格，以使圖表看起來更整潔。為此，請將nodeLinkPadding屬性的值設置為所需的數量。

使用下面給出的代碼：

{
    "chart": {
        "nodeLinkPadding": "10"
    }
}

您可以制作一個過渡前和弦圖，而不是默認的過渡后和弦圖。為此，請將mode屬性的值設置為pre。

使用下面給出的代碼：

{
    "chart": {
        "mode": "pre"
    }
}

默認情況下，“弦圖”中的鏈接繼承了連接到它們的主導節點的顏色。但是，如果將linkColorByDominance屬性的值設置為0，則鏈接將繼承非主導節點的顏色。

使用下面給出的代碼：

{
    "chart": {
        "linkColorByDominance": "0"
    }
}

您可以自定義節點和鏈接的工具提示，以在用戶懸停節點或鏈接時顯示更多信息。要做到這一點，你可以使用plotToolText，linkToolText或toolText屬性與一些宏一起。

使用 plotToolText

該plotToolText屬性在全局級別起作用，它為圖表中的所有節點定義了一個工具提示模板。對于價值plotToolText屬性是由宏的模板，模板也可以包含純文本和基本的HTML標簽，如br，strong，em，和b。

和弦圖表，plotToolText支持以下宏$label，$nodeValue，$nodeDataValue，$plotFillColor，$plotFillAlpha，和$plotIdentifier。有關宏的更多信息，請參見宏列表。

請參考下面的代碼：

{
    "chart": {
        "plotToolText": '$label exports $nodeDataValue'
    }
}

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

和弦圖表，linkToolText支持以下宏：$dominantNode，$subservientNode，$dominantFlowValue，$dominantFlowDataValue，$subservientFlowValue，$subservientFlowDataValue，$dominantPlotIdentifier，和$subservientPlotIdentifier。

請參考下面的代碼：

{
    "chart": {
        "linkToolText": '$dominantNode exports $dominantFlowDataValue to $subservientNode'
    }
}

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

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

請參考下面的代碼：

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

請參考下面的代碼：

{
    "links": [{
         "toolText": '$dominantNode exports $dominantFlowDataValue to $subservientNode'
    }]
}

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