概述
本 Demo 展示了如何创建树状图并自定义其样式。Demo 包含两个工作表：第一个工作表展示基础的树状图，第二个工作表展示如何自定义树状图的数据标签颜色、标题和数据点样式。数据使用世界人口的层级结构，展示地区、次区域和国家的人口分布情况。
实现思路
初始化工作簿并创建两个工作表，分别展示基础树状图和自定义样式树状图
为两个工作表设置相同的表格样式（边框、对齐方式、列宽）
使用 setArray 方法加载世界人口的层级数据（地区、次区域、国家、人口）
使用 charts.add 方法创建树状图，指定图表类型为 ChartType.treemap
为第二个工作表的树状图设置自定义样式：数据标签颜色、标题文本、数据点填充颜色和透明度
代码解析
创建树状图
这段代码使用 charts.add 方法创建树状图。参数依次为：图表名称、图表类型、x 坐标、y 坐标、宽度、高度、数据范围。树状图类型通过 GC.Spread.Sheets.Charts.ChartType.treemap 指定。
设置图表标题
通过 chart.title() 方法获取标题对象，设置 text 属性后再调用 chart.title(title) 方法应用修改。
自定义数据点样式
这段代码为树状图的四个主要区域（亚洲、非洲、欧洲、其他）设置不同的填充颜色。使用 dataPoints.get(index) 获取数据点对象，修改 fillColor 和 transparency 属性后，使用 dataPoints.set(index, dataPoint) 方法应用修改。
设置数据标签颜色
通过 chart.dataLabels() 方法获取数据标签对象，设置 color 属性为白色，使标签在彩色背景上更清晰可见。
运行效果
第一个工作表显示基础的树状图，展示世界人口的层级分布
第二个工作表显示自定义样式的树状图，包含白色数据标签、标题和彩色数据点
树状图使用嵌套矩形表示层级关系，最大矩形代表亚洲（人口最多），最小矩形代表欧洲（人口最少）
鼠标悬停在矩形上可查看具体数据值
API 参考
charts.add() 方法
name：图表名称
chartType：图表类型，树状图使用 GC.Spread.Sheets.Charts.ChartType.treemap
x、y：图表在工作表中的位置坐标
width、height：图表的宽度和高度
dataRange：可选，数据源范围
chart.series().dataPoints() 方法
dataPoints.get(index)：获取指定索引的数据点对象
dataPoint.fillColor：数据点填充颜色
dataPoint.transparency：数据点透明度（0~1）
dataPoints.set(index, dataPoint)：应用修改后的数据点样式
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
// custom sheet style
setSheet(sheets);
setData(sheets[0], 'treemapChart');
initTreemap(sheets[0], GC.Spread.Sheets.Charts.ChartType.treemap);
setData(sheets[1], 'customStyle');
var customTreemapChart = initTreemap(sheets[1], GC.Spread.Sheets.Charts.ChartType.treemap);
setDataLabels(customTreemapChart);
setTitle(customTreemapChart);
setDataPoints(customTreemapChart);
spread.resumePaint();
}
function setSheet(sheets) {
var columnWidths = [20, 100, 100, 80];
for (var i = 0; i < sheets.length; i++) {
sheets[i].options.gridline.showHorizontalGridline = false;
sheets[i].options.gridline.showVerticalGridline = false;
sheets[i].getRange(1, 1, 17, 3)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {all: true});
sheets[i].getRange(1, 1, 1, 3).font('bold normal 10pt Arial');
for (var j = 0; j < columnWidths.length; j++) {
sheets[i].setColumnWidth(j, columnWidths[j]);
}
}
}
function initTreemap(sheet, chartType) {
sheet.resumePaint();
return sheet.charts.add((sheet.name() + chartType), chartType, 320, 0, 650, 400, "B2:E18");
}
function setDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.color='white';
chart.dataLabels(dataLabels);
}
function setTitle(chart) {
var title = chart.title();
title.text = 'Expenses';
chart.title(title);
}
function setDataPoints(chart) {
var dataPoints = chart.series().dataPoints();
var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31'];
for (var i = 0; i < fillColors.length; i++) {
var dataPoint = dataPoints.get(i);
dataPoint.fillColor = fillColors[i];
dataPoint.transparency = 0; // 0~1
dataPoints.set(i, dataPoint);
}
}
function setData(sheet, sheetName) {
sheet.name(sheetName);
sheet.suspendPaint();
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);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-tutorial"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
