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

---

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

Sunburst圖表用于可視化分層數據中的關系。它通過一系列同心環顯示層次結構，其中每個環都對應于層次結構中的一個級別。每個環可以具有多個段；每個分段均顯示該層次結構中特定維度的貢獻。專注于環中的一個片段，可以感覺到該尺寸與其父環片段之間的整體關系。

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

要創建朝陽圖，請遵循以下步驟：

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

有關屬性的詳細列表，請參閱森伯斯特圖表的圖表屬性頁面。

要繪制森伯斯特圖，請指定所有葉節點的值。如果未指定任何葉節點值，則圖表將顯示“無數據可顯示消息”。

森伯斯特圖如下所示：

在上面的圖表中，您可以看到圖表的不同部分如何代表數據的不同部分并相應地著色。

重要概念相關的旭日形圖

顯示層級結構中的數據

Sunburst圖可以顯示幾乎無限數量的數據層次結構級別。請注意，如果數據中只有一層層次結構，則該圖表將成為一個甜甜圈圖。層次由同心環表示，層次的頂層在中心，而更深的層次則輻射得更遠。

層次結構的每個級別中的單個段稱為node。沒有子節點的任何環段都是葉節點。沒有父節點的任何節點都是根節點。

了解部分到整體的關系

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

掃段的角度

環中每個段的后掠角對每個貢獻成員的數據值進行編碼。段的總值越大，其覆蓋的掃角越大。

類別顏色

每個節點（根節點除外）都繼承其父節點的顏色。這可以幫助您識別數據中的父子關系和同級關系。

向下鉆取

默認情況下，朝陽圖支持向下鉆取，即，當您單擊某個節點時，它會隨其子節點一起顯示，以突出顯示它們之間的關系。對于除第一個環上的根節點和最后一個環上的葉節點以外的任何節點，都會發生這種情況。如果再次單擊父節點，則圖表將恢復為原始狀態。

指定值，以節點

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

旋轉標簽

森伯斯特顯示旋轉的標簽。每個標簽的旋轉角度取決于節點關聯的環的起始角度和終止角度。

旭日形圖配置

啟用/禁用向下鉆取

默認情況下，當您單擊某個節點（第一個環上的根節點和最后一個環上的葉節點除外）時，圖表會向下鉆取，即顯示由該節點及其子節點組成的數據子集。要禁用此功能，請將allowDrillToNode屬性的值設置為0。

使用下面給出的代碼：

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

該圖表如下圖所示： 指定的內部半徑值

當根只有一個父節點時，默認情況下將的值innerRadius設置為0。但是，如果一個根具有多個父節點，則會將默認值30像素分配給innerRadius。

使用下面給出的代碼：

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

設置中心角

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

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

合計設定角度

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

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

使用下面給出的代碼：

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

設置填充顏色

您可以指定節點的顏色。為此，請將paletteColors屬性的值設置為所需顏色的十六進制代碼。請注意，如果不指定任何顏色，則節點的顏色如下：

• 層次結構第一級中的每個節點的顏色與默認調色板的顏色不同。如果只有一個根節點，則從具有根節點的那一層之后的級別開始應用著色邏輯。對于多個根節點，從根級別開始應用著色邏輯。
• 后續子節點繼承其父節點的顏色。

使用下面給出的代碼：

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

配置懸停效果

您可以配置將鼠標懸停在節點上時發生的幾種懸停效果。這些效果將應用于懸停的節點及其父節點。

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

使用下面給出的代碼：

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

配置突出顯示效果

森伯斯特圖表支持多種突出顯示效果，當您將鼠標指針移到圖表中的相關元素上時，將激活這些突出顯示效果。

突出顯示父段

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

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

設置不相關節點的透明度

將指針懸停在節點上時，所有節點（懸停的節點及其父節點除外）都變為透明。此行為由屬性控制，該屬性unfocussedAlpha的值0默認設置為。要使每個節點在圖表中始終可見，請將的值設置unfocussedAlpha為100。
使用下面給出的代碼：

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

設置懸停節點的透明度

將鼠標懸停在節點上時，它變得不透明。此行為由hoverFillAlpha屬性控制，該屬性的值100默認設置為。要改為使該節點透明，請將的值設置hoverFillAlpha為0。
使用下面給出的代碼：

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

配置懸停節點的填充顏色

默認情況下，懸停的節點在懸停時將保留其顏色。這由hoverFillColor屬性控制，該屬性繼承屬性的值fillColor。若要更改此行為，并為懸停的節點設置中性色（例如紅色），請將的值設置hoverFillColor為所需顏色的十六進制代碼。
使用下面給出的代碼：

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

增加圖表標簽能見度

使用該屬性可textOutline向Sunburst圖表中的數據標簽添加輪廓。
請參考以下代碼：

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

---

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