旭日图

旭日图以图形形式显示分层数据集，并以行和列的形式绘制多个类别或级别的数据。

SpreadJS支持旭日图，以使用户能够在处理表单中的表和关系数据库时分析同质和异质数据。 此外，这种类型的图表可帮助用户将数据分解为不同的实体，以快速有效地识别和可视化不同业务场景中的多级父子关系。

使用旭日图

通常，创建具有多个级别或类别的旭日图。 每个类别或级别由一个圆环或一个圆圈表示，最里面的圆圈表示顶层，从而显示外圈（子类别或子级别）与内圈（父类别或顶层）的关系。

在SpreadJS中, DataPoints 类表示图表系列中的所有数据点。 数据点可用于表示分层数据中的每个最高级别及其子数据点。

如果创建的旭日图仅具有一个类别或级别，则其外观类似于圆环图。 旭日图特别有用，尤其是当用户想要显示一个类别或级别（环）如何分解成其组成部分时。

示例

例如，让我们以下表中所示的世界人口为例，其中四个主要区域代表数据点（最高级别）-亚洲，非洲，欧洲和其他地区。 这些区域被进一步划分为次区域，这些区域又被划分为国家，每个国家都有独特的人口统计数据。

为上述数据创建旭日图时，以有效的方式进行全面数据分析的操作，理解和可视化信息变得更加容易和快捷。

下面的截图显示了旭日图的图像，该图像描绘了以上绘制的不同地区，区域和国家的数据的世界人口。

显然，最里面的圆圈描绘了所有四个最高级别（亚洲，非洲，欧洲及其他），其中亚洲是世界上人口最多的地区，欧洲是世界上人口最少的地区。 另外，上表中人口最多的国家是东部地区的中国。

示例代码

此示例代码显示了如何在表单中创建旭日图以分析世界人口。

// 创建旭日图
window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(4, 100);
var dataArray = [
['Region', 'Subregion', 'Country', 'Population'],
['Asia', 'Southern', 'India', 954051854],
[, , 'Pakistan', 200813818],
[, , 'Thailand', 466368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1215045928],
[, , 'Japan', 527185332],
[, , 'Others', 191652273],
[, 'South-Eastern', , 955036576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433043132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
];

sheet.setArray(1, 1, dataArray);
var chart = sheet.charts.add('chart1',   
GC.Spread.Sheets.Charts.ChartType.sunburst,450, 0, 500, 500, "B2:E18");
var title = chart.title()
title.fontSize = "24.00";
title.color = "rgb(228,65,54)";
title.text = 'WORLD POPULATION';
chart.title(title);
var dataPoints = chart.series().dataPoints();
var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31'];
fillColors.forEach(function (color, index)
{
var dataPoint = dataPoints.get(index);
dataPoint.fillColor = color;
dataPoint.transparency = 0; // 0~1
  dataPoints.set(index, dataPoint);
})
};

旭日图仅支持一个系列。 此外，旭日图中的数据标签可以配置为仅显示类别名称。

注意: 旭日图仅支持一个系列。 此外，旭日图中的数据标签可以配置为仅显示类别名称。