概述
本 Demo 展示了如何在 SpreadJS 中结合 AI 功能，实现数据透视表的智能生成与分析。Demo 创建了一个预设的销售数据透视表，并通过 injectAI 方法注入 AI 回调函数，使用户可以在数据透视面板中使用 AI 功能：自动生成透视表布局和分析透视结果。
实现思路
创建 Spread 工作簿，根据运行环境选择设计器模式或独立工作簿模式
初始化数据源，在第二张工作表创建包含销售数据的表格
在第一张工作表创建数据透视表，配置行、列、值字段，并对日期字段按季度分组
创建数据透视面板，用于展示和操作透视表（独立工作簿模式）
注入 AI 回调函数，配置 AI 服务连接
代码解析
创建数据透视表并配置字段
这段代码展示了数据透视表的创建和配置过程。pivotTables.add() 方法创建透视表，参数依次为透视表名称、数据源（表格名称）、起始行列位置、布局类型和主题样式。通过 add() 方法添加行、列、值字段，通过 group() 方法对日期字段进行分组。使用 suspendLayout() 和 resumeLayout() 可以批量更新配置，避免频繁重绘。
创建数据透视面板
PivotPanel 构造函数接收三个参数：面板名称、关联的数据透视表对象、DOM 容器元素。面板提供可视化界面，用户可以拖拽字段、调整布局。本 Demo 在独立工作簿模式下创建面板，设计器模式下使用内置字段列表。
注入 AI 回调函数
injectAI 方法将 AI 回调函数注入到工作簿中。回调函数接收请求体对象，负责将请求发送到后端服务器，并返回响应。这种方式可以保护 API 密钥不暴露在前端，同时允许自定义请求逻辑。getAIApiUrl() 函数动态获取服务器 API 地址。
运行效果
页面加载后，第一张工作表显示预设的数据透视表，按销售员和车型汇总销售总额，列按季度分组
在设计器模式下，可以打开字段列表面板操作透视表
在独立模式下，右侧显示数据透视面板
用户可以在数据透视面板右上角点击 "A" 按钮，让 AI 根据需求自动生成透视表布局
点击 "I" 按钮，可以让 AI 分析当前透视表结果，提供数据洞察
API 参考
pivotTables.add() 方法
name：透视表名称
sourceData：数据源，可以是表格名称或范围公式
row、col：起始位置
layout：布局类型（compact、outline、tabular）
theme：主题样式
options：配置选项
PivotPanel 构造函数
name：面板名称
pivotTable：关联的数据透视表对象
host：DOM 容器元素
injectAI() 方法
callbackOrEnv：AI 回调函数或环境配置对象
回调函数签名：(requestBody) => Promise<Response>
环境对象包含：model、key、basePath 等属性
let spreadNS = GC.Spread.Sheets;
let config = GC.Spread.Sheets.Designer.DefaultConfig;
window.onload = function () {
const spread = createSpreadAndDesigner();
injectAI(spread);
};
function createSpreadAndDesigner() {
const demoHost = document.getElementById("demo-host");
if (window !== top) {
const spread = new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 2 });
const pt = initData(spread);
const panel = new GC.Spread.Pivot.PivotPanel('panel', pt, document.getElementById('panel'));
return spread;
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(
demoHost,
undefined,
undefined,
{ sheetCount: 2 }
);
const spread = designer.getWorkbook();
const panel = document.getElementById('panel');
panel.style.display = 'none';
initData(spread);
spreadNS.Designer.getCommand('showFieldList').execute(designer);
return spread;
}
}
function initData(spread) {
// init Spread
spread.suspendPaint();
spread.setSheetCount(2);
let sheet = spread.getSheet(1);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for (let i = 2; i <= 117; i++) {
sheet.setFormula(i - 1, 5, '=D' + i + '*E' + i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
// init PivotTable
let myPivotTable = sheet0.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
myPivotTable.add("季度 (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
sheet0.setActiveCell(2, 2);
spread.resumePaint();
return myPivotTable;
}
function injectAI(spread) {
const serverCallback = async (requestBody) => {
const response = await fetch(getAIApiUrl(), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestBody)
});
if (response.status === 429) {
alert('The server is busy, please try again later.');
return;
}
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response;
};
spread.injectAI(serverCallback);
}
function getAIApiUrl() {
return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api/queryAI';
}
<!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">
<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$/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-barcode/dist/gc.spread.sheets.barcode.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.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-formula-panel/dist/gc.spread.sheets.formulapanel.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ai-addon/dist/gc.spread.sheets.ai.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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/designer/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.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="demo-host"></div>
<div id="panel"></div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
}
#demo-host {
width: calc(100% - 300px);
height: 100%;
flex-grow: 1;
}
#panel {
margin-left: 10px;
width: 300px;
display: flex;
flex-direction: column;
}
