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

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

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

要創(chuàng)建朝陽圖，請遵循以下步驟：

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

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

森伯斯特圖如下所示：

重要概念相關的旭日形圖

顯示層級結構中的數(shù)據(jù)

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

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

了解部分到整體的關系

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

掃段的角度

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

類別顏色

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

向下鉆取

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

指定值，以節(jié)點

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

旋轉(zhuǎn)標簽

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

旭日形圖配置

啟用/禁用向下鉆取

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

使用下面給出的代碼：

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

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

使用下面給出的代碼：

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

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

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

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

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

使用下面給出的代碼：

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

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

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

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

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

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

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

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

突出顯示父段

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

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

將指針懸停在節(jié)點上時，所有節(jié)點（懸停的節(jié)點及其父節(jié)點除外）都變?yōu)橥该鳌４诵袨橛蓪傩钥刂疲搶傩評nfocussedAlpha的值0默認設置為。要使每個節(jié)點在圖表中始終可見，請將的值設置unfocussedAlpha為100。
使用下面給出的代碼：

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

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

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

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

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

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

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

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