概述
本 Demo 展示了如何将来自多个表的数据绑定到数据图表中。Demo 通过加载预定义模板,展示了两个数据图表,每个图表都绑定了来自多个关联表的数据,并提供了数据图表配置面板供用户查看和修改绑定设置。
实现思路
使用 fromJSON 加载预定义的数据图表模板(spread.json)
创建 DataChartConfigPanel 实例,提供用户界面来配置数据图表
选中第一个数据图表,让用户可以直接查看图表选中状态
根据运行环境决定是否创建 Designer 实例(独立窗口运行时加载完整设计器,iframe 中运行时仅加载工作簿)
代码解析
加载预定义模板
这段代码通过 fetch 获取预定义的 JSON 模板,然后使用 fromJSON 方法加载到工作簿中。模板中已包含了配置好的数据图表、数据表以及表之间的关联关系。
创建数据图表配置面板
DataChartConfigPanel 构造函数接收两个参数:
host: 面板的容器元素或元素 ID
spread: SpreadJS 工作簿实例
创建配置面板后,用户可以通过可视化界面查看和修改数据图表的数据绑定设置。
选中数据图表
这行代码获取当前工作表的所有数据图表,选中第一个图表,使其处于可编辑状态,方便用户查看图表配置。
创建工作簿和设计器
这段代码根据运行环境创建不同的实例:
在 iframe 中运行时,仅创建工作簿实例
在独立窗口运行时,创建完整的设计器实例,提供更多功能
运行效果
页面加载时显示"加载模板及数据……"提示
模板加载完成后,显示两个已配置好的数据图表
点击任一数据图表,右侧会显示数据图表配置面板
在配置面板的"数据绑定"选项卡中,可以查看图表绑定的数据表和字段
可以在新窗口中打开 Demo,使用 SpreadJS 设计器的完整功能查看和编辑图表设置
API 参考
fromJSON 方法
jsonData: SpreadJS 工作簿的 JSON 数据
返回值: Promise
用于加载预定义的工作簿模板,包括表格、图表、样式等所有配置。
DataChartConfigPanel 构造函数
host: 容器元素或元素 ID
spread: SpreadJS 工作簿实例
返回值: DataChartConfigPanel 实例
创建数据图表配置面板,提供可视化的数据绑定和图表配置界面。
dataCharts.all() 方法
返回值: 工作表上所有数据图表的数组
获取工作表中的所有数据图表实例。
window.onload = async () => {
const loadingTip = addLoadingTip();
const { spread, designer } = createSpreadAndDesigner();
const res = await fetch('$DEMOROOT$/zh/sample/features/data-charts/bind-multiple-tables/spread.json');
await spread.fromJSON(await res.json());
new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread);
spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
loadingTip.remove();
if (designer) {
designer.refresh();
}
}
function createSpreadAndDesigner() {
const demoHost = document.getElementById('demo-host');
if (window !== top) {
return {
spread: new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 1 }),
}
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
return {
designer,
spread: designer.getWorkbook(),
}
}
}
function addLoadingTip() {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.inset = '0';
div.style.display = 'flex';
div.style.alignItems = 'center';
div.style.justifyContent = 'center';
div.style.background = 'white';
div.style.zIndex = '100';
div.textContent = '加载模板及数据……';
document.body.appendChild(div);
return div;
}
<!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%;
}
