概述
本 Demo 展示了如何使用 SpreadJS 数据图表功能创建树状图，可视化产品销售数据的层级结构。Demo 使用产品类型（ProductType）和产品名称（Product）两级分类，通过嵌套矩形展示各类别和产品的销售额占比。
实现思路
初始化数据管理器：创建销售数据表，包含产品类型、产品名称和销售额三个字段
创建树状图：使用 dataCharts.add() 方法添加树状图，指定图表类型为 DataChartType.treemap
配置数据绑定：通过 setChartConfig() 方法配置数据源和字段绑定，设置数值字段和层级字段
设置提示框样式：自定义悬停提示框的填充色、边框和文本样式，增强交互体验
配置图表标题：设置标题文本、位置和样式，提升图表可读性
代码解析
初始化数据管理器
这段代码初始化数据管理器，将二维数组转换为对象数组，创建名为 'Sales' 的数据表。数据包含三个字段：ProductType（产品类型）、Product（产品名称）和 Sales（销售额）。
创建并配置树状图
关键配置说明：
tableName：指定绑定的数据表名称
encodings.values：设置数值字段为 Sales，使用 sum 聚合方式
encodings.details：设置两级分类，先按 ProductType 分组，再按 Product 分组，形成嵌套的矩形结构
encodings.tooltip：设置悬停提示框显示的字段，包括产品类型、产品名称和销售额
自定义提示框样式
这段代码自定义提示框的外观：白色背景、浅灰色边框、深灰色文本，提升视觉效果。
配置图表标题
设置图表标题为 'Treemap Chart'，使用斜体样式并左对齐，增强可读性。
运行效果
树状图以嵌套矩形展示产品销售数据，每个大矩形代表一个产品类型（如 Smartphones、Laptops 等）
大矩形内部包含多个小矩形，每个小矩形代表该类型下的具体产品
矩形的大小与销售额成正比，销售额越大的产品矩形面积越大
鼠标悬停在任意矩形上时，会显示提示框，展示产品类型、产品名称和销售额详细信息
通过直观的图形化展示，用户可以快速识别销售表现最佳的产品类型和产品
API 参考
dataCharts.add 方法
name：数据图表名称
x、y：图表在工作表中的位置
width、height：图表的宽度和高度
type：可选，图表类型，默认为柱状图
setChartConfig 方法
config.tableName：绑定的数据表名称
config.plots：绘图配置数组
plots[].type：图表类型
plots[].encodings：数据绑定配置
values：数值字段配置
details：层级字段配置
tooltip：提示框字段配置
plots[].config：绘图样式配置
config.config：图表全局配置，如标题、图例等
IPlotEncodingsOption 接口
values：指定数值字段，支持聚合方式（sum、average、count 等）
details：指定层级分类字段，树状图通过多个 details 字段创建嵌套结构
tooltip：指定提示框显示的字段列表
window.onload = async () => {
const { spread, designer } = createSpreadAndDesigner();
await initDataManager(spread);
const dataChart = spread.getActiveSheet().dataCharts.add('treemap', 30, 30, 550, 400, GC.Spread.Sheets.DataCharts.DataChartType.treemap);
dataChart.setChartConfig({
tableName: 'Sales',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.treemap,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
details: [{ field: 'ProductType' }, { field: 'Product' }],
tooltip: [{ field: 'ProductType' }, { field: 'Product' }, { field: 'Sales' }],
},
config: {
treemap: {
header: {
template: "{detailFields.value}",
textStyle: {
color: "#000000",
fontSize: 14,
fontWeight: "Bold"
},
},
},
text: [{
template: "{detailFields.value},{valueField.value}",
textStyle: {
color: "#4a4a4a",
fontSize: 12,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
},
}],
tooltip: [{
style: {
fill: { type: 'CssColor', color: 'white' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
color: '#555555',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Treemap Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
if (designer) {
designer.refresh();
}
}
function createSpreadAndDesigner() {
const demoHost = document.getElementById('demo-host');
if (window !== top) {
const spread = new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 1 });
new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread);
return {
spread
}
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
return {
designer,
spread: designer.getWorkbook(),
}
}
}
async function initDataManager(spread) {
const records = [
['Smartphones', 'iPhone 15', 4200],
['Smartphones', 'Galaxy', 3100],
['Smartphones', 'Pixel 8', 2400],
['Laptops', 'MacBook Pro 14', 5500],
['Laptops', 'XPS 13', 3300],
['Laptops', 'ThinkPad X1', 2800],
['Tablets', 'iPad Air', 2600],
['Tablets', 'Surface Go', 1900],
['Wearables', 'Apple Watch S9', 1800],
['Wearables', 'Galaxy Watch 6', 1200],
['Accessories', 'AirPods Pro', 2100],
];
const columns = ['ProductType', 'Product', 'Sales'];
await spread.dataManager().addTable('Sales', {
data: records.map(record => {
const item = {};
columns.forEach((column, index) => {
item[column] = record[index];
});
return item;
}),
}).fetch();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<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">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css">
<link rel="stylesheet" type="text/css" href="styles.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-print/dist/gc.spread.sheets.print.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-datacharts-addon/dist/gc.spread.sheets.datacharts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script>
const designerDependencyScripts = [
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js',
'$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js',
'$DEMOROOT$/spread/source/js/designer/license.js',
]
function appendScriptNode (src) {
const script = document.createElement('script');
script.src = src;
script.async = false;
script.type = 'text/javascript';
document.head.appendChild(script);
}
if (top === window) { // not in iframe
designerDependencyScripts.forEach(appendScriptNode);
}
</script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="sample-tutorial">
<div id="demo-host">
<div id="spread-host"></div>
<div id="panel-host"></div>
</div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
#demo-host {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
#spread-host {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 380px);
height: 100%;
}
#panel-host {
position: absolute;
top: 0;
right: 0;
width: 380px;
height: 100%;
}
