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

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頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

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

Sunburst圖表用于可視化分層數(shù)據(jù)中的關(guān)系。它通過一系列同心環(huán)顯示層次結(jié)構(gòu)，其中每個(gè)環(huán)都對(duì)應(yīng)于層次結(jié)構(gòu)中的一個(gè)級(jí)別。每個(gè)環(huán)可以具有多個(gè)段；每個(gè)分段均顯示該層次結(jié)構(gòu)中特定維度的貢獻(xiàn)。專注于環(huán)中的一個(gè)片段，可以感覺到該尺寸與其父環(huán)片段之間的整體關(guān)系。

森伯斯特（Sunburst）圖表最有效地顯示了如何將一個(gè)戒指分成其各個(gè)組成部分（即，連續(xù)的片段）。這是一個(gè)使用徑向而不是矩形布局（如Treemap）的空間可視化。

要?jiǎng)?chuàng)建朝陽圖，請(qǐng)遵循以下步驟：

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

要繪制森伯斯特圖，請(qǐng)指定所有葉節(jié)點(diǎn)的值。如果未指定任何葉節(jié)點(diǎn)值，則圖表將顯示“無數(shù)據(jù)可顯示消息”。

森伯斯特圖如下所示：

重要概念相關(guān)的旭日形圖

顯示層級(jí)結(jié)構(gòu)中的數(shù)據(jù)

Sunburst圖可以顯示幾乎無限數(shù)量的數(shù)據(jù)層次結(jié)構(gòu)級(jí)別。請(qǐng)注意，如果數(shù)據(jù)中只有一層層次結(jié)構(gòu)，則該圖表將成為一個(gè)甜甜圈圖。層次由同心環(huán)表示，層次的頂層在中心，而更深的層次則輻射得更遠(yuǎn)。

層次結(jié)構(gòu)的每個(gè)級(jí)別中的單個(gè)段稱為node。沒有子節(jié)點(diǎn)的任何環(huán)段都是葉節(jié)點(diǎn)。沒有父節(jié)點(diǎn)的任何節(jié)點(diǎn)都是根節(jié)點(diǎn)。

了解部分到整體的關(guān)系

森伯斯特圖中的每個(gè)子節(jié)點(diǎn)代表其父節(jié)點(diǎn)值的一部分。通過求和所有子節(jié)點(diǎn)的值，可以得到父節(jié)點(diǎn)（環(huán)段）的值。每個(gè)環(huán)段的掃描范圍與其值成正比。

掃段的角度

環(huán)中每個(gè)段的后掠角對(duì)每個(gè)貢獻(xiàn)成員的數(shù)據(jù)值進(jìn)行編碼。段的總值越大，其覆蓋的掃角越大。

類別顏色

每個(gè)節(jié)點(diǎn)（根節(jié)點(diǎn)除外）都繼承其父節(jié)點(diǎn)的顏色。這可以幫助您識(shí)別數(shù)據(jù)中的父子關(guān)系和同級(jí)關(guān)系。

向下鉆取

默認(rèn)情況下，朝陽圖支持向下鉆取，即，當(dāng)您單擊某個(gè)節(jié)點(diǎn)時(shí)，它會(huì)隨其子節(jié)點(diǎn)一起顯示，以突出顯示它們之間的關(guān)系。對(duì)于除第一個(gè)環(huán)上的根節(jié)點(diǎn)和最后一個(gè)環(huán)上的葉節(jié)點(diǎn)以外的任何節(jié)點(diǎn)，都會(huì)發(fā)生這種情況。如果再次單擊父節(jié)點(diǎn)，則圖表將恢復(fù)為原始狀態(tài)。

指定值，以節(jié)點(diǎn)

在森伯斯特圖表中，僅在提及葉節(jié)點(diǎn)的值時(shí)才顯示葉節(jié)點(diǎn)。父節(jié)點(diǎn)的值必須等于或大于分配給其子節(jié)點(diǎn)的值之和。默認(rèn)情況下，所有子節(jié)點(diǎn)的值之和被分配給父節(jié)點(diǎn)。

旋轉(zhuǎn)標(biāo)簽

森伯斯特顯示旋轉(zhuǎn)的標(biāo)簽。每個(gè)標(biāo)簽的旋轉(zhuǎn)角度取決于節(jié)點(diǎn)關(guān)聯(lián)的環(huán)的起始角度和終止角度。

旭日形圖配置

啟用/禁用向下鉆取

默認(rèn)情況下，當(dāng)您單擊某個(gè)節(jié)點(diǎn)（第一個(gè)環(huán)上的根節(jié)點(diǎn)和最后一個(gè)環(huán)上的葉節(jié)點(diǎn)除外）時(shí)，圖表會(huì)向下鉆取，即顯示由該節(jié)點(diǎn)及其子節(jié)點(diǎn)組成的數(shù)據(jù)子集。要禁用此功能，請(qǐng)將allowDrillToNode屬性的值設(shè)置為0。

使用下面給出的代碼：

{
    "chart": {
        "allowDrillToNode": "0"
    }
}

當(dāng)根只有一個(gè)父節(jié)點(diǎn)時(shí)，默認(rèn)情況下將的值innerRadius設(shè)置為0。但是，如果一個(gè)根具有多個(gè)父節(jié)點(diǎn)，則會(huì)將默認(rèn)值30像素分配給innerRadius。

使用下面給出的代碼：

{
    "chart": {
        "innerRadius": "40"
    }
}

想象一條線將朝陽圖平分。直線與原點(diǎn)（0,0）所成的角度是森伯斯特的中心角。您可以使用屬性指定森伯斯特圖的中心角centerAngle。
使用下面給出的代碼：

{
    "chart": {
        "centerAngle": "90"
    }
}

您可以使用totalAngle屬性來限制朝陽圖覆蓋的總角度。設(shè)置其值時(shí)，可用角度將在數(shù)據(jù)的各個(gè)類別之間分配。為每個(gè)類別分配一個(gè)占其總空間的百分比，與其值成正比。

該totalAngle屬性直接控制森伯斯特圖的外觀。例如，如果將其值設(shè)置為180，則將獲得一半的森伯斯特。

使用下面給出的代碼：

{
    "chart": {
        "totalAngle": "180"
    }
}

您可以指定節(jié)點(diǎn)的顏色。為此，請(qǐng)將paletteColors屬性的值設(shè)置為所需顏色的十六進(jìn)制代碼。請(qǐng)注意，如果不指定任何顏色，則節(jié)點(diǎn)的顏色如下：

• 層次結(jié)構(gòu)第一級(jí)中的每個(gè)節(jié)點(diǎn)的顏色與默認(rèn)調(diào)色板的顏色不同。如果只有一個(gè)根節(jié)點(diǎn)，則從具有根節(jié)點(diǎn)的那一層之后的級(jí)別開始應(yīng)用著色邏輯。對(duì)于多個(gè)根節(jié)點(diǎn)，從根級(jí)別開始應(yīng)用著色邏輯。
• 后續(xù)子節(jié)點(diǎn)繼承其父節(jié)點(diǎn)的顏色。

{
    "chart": {
       "paletteColors": "ffffff, A88CCC, 77ECC8, 97FAA4, CFF69D, EED482, FFAE91, FE93B5, D98ACF, 7BCDE8, 94A8E9",
    }
}

您可以配置將鼠標(biāo)懸停在節(jié)點(diǎn)上時(shí)發(fā)生的幾種懸停效果。這些效果將應(yīng)用于懸停的節(jié)點(diǎn)及其父節(jié)點(diǎn)。

• 將attributehoverFillColor屬性的值設(shè)置為節(jié)點(diǎn)所需顏色的十六進(jìn)制值。默認(rèn)情況下，的值hoverFillColor設(shè)置為懸停節(jié)點(diǎn)所屬細(xì)分的顏色。
• 設(shè)置的值hoverFillAlpha（在0透明和100不透明之間）以設(shè)置懸停節(jié)點(diǎn)及其父節(jié)點(diǎn)的透明度。
• 設(shè)置unfocussedAlpha屬性的值（在0透明和100不透明之間），以設(shè)置除懸停節(jié)點(diǎn)之外的其他節(jié)點(diǎn)的透明度。

{
    "chart": {
        "hoverFillColor": "#FF0000",
        "hoverFillAlpha": "50",
        "unfocussedAlpha": "50"
    }
}

森伯斯特圖表支持多種突出顯示效果，當(dāng)您將鼠標(biāo)指針移到圖表中的相關(guān)元素上時(shí)，將激活這些突出顯示效果。

突出顯示父段

在朝陽圖中，將指針懸停在子節(jié)點(diǎn)上時(shí)，將突出顯示父節(jié)點(diǎn)（一直到根節(jié)點(diǎn)）。這由屬性控制，該屬性highlightParentPieSlices的值1默認(rèn)設(shè)置為。
使用下面給出的代碼：

{
    "chart": {
        "highlightParentPieSlices": "0"
    }
}

將指針懸停在節(jié)點(diǎn)上時(shí)，所有節(jié)點(diǎn)（懸停的節(jié)點(diǎn)及其父節(jié)點(diǎn)除外）都變?yōu)橥该鳌４诵袨橛蓪傩钥刂?，該屬性u(píng)nfocussedAlpha的值0默認(rèn)設(shè)置為。要使每個(gè)節(jié)點(diǎn)在圖表中始終可見，請(qǐng)將的值設(shè)置unfocussedAlpha為100。
使用下面給出的代碼：

{
    "chart": {
        "unfocussedAlpha": "70"
    }
}

將鼠標(biāo)懸停在節(jié)點(diǎn)上時(shí)，它變得不透明。此行為由hoverFillAlpha屬性控制，該屬性的值100默認(rèn)設(shè)置為。要改為使該節(jié)點(diǎn)透明，請(qǐng)將的值設(shè)置hoverFillAlpha為0。
使用下面給出的代碼：

{
    "chart": {
        "hoverFillAlpha": "20"
    }
}

默認(rèn)情況下，懸停的節(jié)點(diǎn)在懸停時(shí)將保留其顏色。這由hoverFillColor屬性控制，該屬性繼承屬性的值fillColor。若要更改此行為，并為懸停的節(jié)點(diǎn)設(shè)置中性色（例如紅色），請(qǐng)將的值設(shè)置hoverFillColor為所需顏色的十六進(jìn)制代碼。
使用下面給出的代碼：

{
    "chart": {
        "hoverFillColor": "#FF0000"
    }
}

{
    "chart": {
        "textOutline": "1"
    }
}