树状图

树状图是一个二维线性图，可用于将层次结构数据显示为表单中以树状结构组织的一组嵌套矩形。

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', 1354051854],
   [, , 'Pakistan', 200813818],
   [, , 'Bangladesh', 166368149],
   [, , 'Others', 170220300],
   [, 'Eastern', 'China', 1415045928],
   [, , 'Japan', 127185332],
   [, , 'Others', 111652273],
   [, 'South-Eastern', , 655636576],
   [, 'Western', , 272298399],
   [, 'Central', , 71860465],
   ['Africa', 'Eastern', , 433643132],
   [, '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.treemap, 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);
})
};

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

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