JavaScript圖表工具FusionCharts入門教程(42)：如何創(chuàng)建和弦圖

---

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

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

和弦圖也稱為“徑向網(wǎng)絡(luò)圖”，“和弦布局”或“依賴輪”。

要創(chuàng)建和弦圖，請執(zhí)行以下步驟：

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

有關(guān)屬性的詳細(xì)列表，請參閱圖表屬性弦圖頁面。

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

上圖中有6個節(jié)點。鏈接連接一對存在關(guān)系的節(jié)點。懸停在節(jié)點上會顯示與其關(guān)聯(lián)的所有鏈接（或關(guān)系）。同樣，將鼠標(biāo)懸停在鏈接上會顯示相關(guān)的節(jié)點。自鏈接節(jié)點也可以存在。

和弦圖突出的特點

轉(zhuǎn)換前和轉(zhuǎn)換后

和弦圖表示過渡數(shù)據(jù)。過渡數(shù)據(jù)有兩種穩(wěn)定狀態(tài)-過渡前和過渡后過渡。

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

缺省情況下，F(xiàn)usionCharts會在發(fā)布狀態(tài)下構(gòu)建和弦圖。但是，您也可以構(gòu)建預(yù)狀態(tài)和弦圖。

基于優(yōu)勢鏈接的顏色

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

FusionCharts中的和弦圖遵循數(shù)據(jù)的主導(dǎo)規(guī)則。其工作方式如下：

• 在前狀態(tài)弦圖中，流出量最小的節(jié)點是鏈接的主導(dǎo)端。在有關(guān)電信運營商的用例中，這適用于失去最少客戶的用戶。
• 在后期狀態(tài)和弦圖中，流入量最大的節(jié)點是鏈接的主導(dǎo)端。在有關(guān)電信運營商的用例中，這適用于獲得更多客戶的運營商。

如果兩個運營商（彼此）失去相同數(shù)量的客戶，則鏈接將變得blend陰影。

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

和弦圖的自定義

切換節(jié)點鏈接能見度

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

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

使用下面給出的代碼：

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

該圖表如下圖所示： 設(shè)置節(jié)點間距您可以在兩個相鄰節(jié)點之間引入空格，以減少圖表中的混亂情況。為此，請將所需的空白值分配給attribute nodeSpacing。

使用下面給出的代碼：

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

該圖表如下圖所示： 集節(jié)點厚度

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

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

該圖表如下圖所示： 設(shè)置的圖表半徑您可以用百分比值指定圖表的半徑。為此，請將所需值設(shè)置為attribute chordRadius。
使用下面給出的代碼：

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

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

節(jié)點標(biāo)簽的位置可以設(shè)置為tangential（默認(rèn)）outside，或inside。要手動放置節(jié)點標(biāo)簽，請將所需位置設(shè)置為nodeLabelPosition屬性。

使用下面給出的代碼：

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

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

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

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

該圖表如下圖所示： 設(shè)置啟動圖表角度

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

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

該圖表如下圖所示： 合計設(shè)定圖表的角度

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

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

添加填充節(jié)點和鏈路之間

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

使用下面給出的代碼：

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

做一個預(yù)遷移圖

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

使用下面給出的代碼：

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

修改鏈接的顏色

默認(rèn)情況下，“弦圖”中的鏈接繼承了連接到它們的主導(dǎo)節(jié)點的顏色。但是，如果將linkColorByDominance屬性的值設(shè)置為0，則鏈接將繼承非主導(dǎo)節(jié)點的顏色。

使用下面給出的代碼：

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

自定義工具提示

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

使用 plotToolText

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

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

請參考下面的代碼：

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

使用 linkToolText

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

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

請參考下面的代碼：

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

使用 toolText

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

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

請參考下面的代碼：

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

當(dāng)使用toolText中的鏈接，它使用下面的宏： $dominantNode，$subservientNode，$dominantFlowValue，$dominantFlowDataValue，$subservientFlowValue，$subservientFlowDataValue，$dominantPlotIdentifier，和$subservientPlotIdentifier。

請參考下面的代碼：

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

使用自定義工具提示的Chord圖如下所示：

---

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