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

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

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

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

要?jiǎng)?chuàng)建和弦圖，請(qǐng)執(zhí)行以下步驟：

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

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

一個(gè)簡(jiǎn)單的和弦圖如下所示：

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

和弦圖突出的特點(diǎn)

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

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

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

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

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

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

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

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

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

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

和弦圖的自定義

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

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

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

使用下面給出的代碼：

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

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

使用下面給出的代碼：

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

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

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

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

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

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

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

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

使用下面給出的代碼：

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

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

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

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

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

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

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

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

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

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

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

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

使用下面給出的代碼：

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

做一個(gè)預(yù)遷移圖

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

使用下面給出的代碼：

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

修改鏈接的顏色

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

使用下面給出的代碼：

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

自定義工具提示

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

使用 plotToolText

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

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

請(qǐng)參考下面的代碼：

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

使用 linkToolText

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

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

請(qǐng)參考下面的代碼：

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

使用 toolText

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

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

請(qǐng)參考下面的代碼：

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

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

請(qǐng)參考下面的代碼：

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

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

---

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