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正版授权，或了解更多产品信息请点击