在新窗口中打开示例可以打开设计器
此示例展示了以下功能：
AI辅助的数据透视表布局生成： 根据用户数据和需求（例如按地区汇总销售或按类别计算平均值）自动创建数据透视表布局。
数据透视表分析： 提供数据透视表结果的洞察和解释，帮助用户理解趋势和关键数据点。
要使用此功能，请按照以下步骤操作：
在电子表格界面中上传或选择您的数据集。
通过文本输入或下拉选项指定您的分析目标（例如，“按月汇总销售”）。
点击“生成数据透视表”（数据透视面板右上角的字母“A”），让AI设计一个针对您的数据优化的布局。
查看生成的数据透视表并将其应用到您的工作区。
点击“分析数据透视表”（数据透视面板右上角的字母“I”），获取结果的详细分析，包括趋势和亮点。
此功能简化了数据透视表的创建和分析，使各技能水平的用户都能从数据中获得可操作的洞察。
AI生成内容免责声明
1. 内容生成风险
此服务利用用户注入的第三方AI模型生成输出。由于模型架构和训练数据的固有局限性，结果可能包含不准确、遗漏或误导性内容。尽管我们实施了提示工程和技术约束以优化输出，但无法完全消除由模型基本缺陷引起的所有错误风险。
2. 用户验证义务
使用此服务即表示您承认并同意：
手动验证所有生成的内容
避免在高风险场景（法律、医疗、金融等）中使用未经验证的输出
对因依赖生成内容而导致的任何直接/间接损害不追究我们的责任
3. 技术限制
我们不对以下情况负责：
由第三方模型缺陷或逻辑错误引起的输出失败
通过容错程序进行的错误恢复尝试未成功
当前AI技术固有的技术限制
4. 知识产权合规
您必须确保：
注入的模型/内容不侵犯第三方权利
未通过服务处理非法/敏感材料
遵守模型提供商的知识产权协议
5. 协议更新
我们保留修改这些条款的权利，以适应：
技术进步（例如新的AI安全协议）
法规变化（例如更新的AI治理框架）
服务架构改进
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("Quarters (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.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;
}
