概述
本 Demo 展示了极坐标放射堆积柱状图的实现效果。这种图表类型将传统的堆积柱状图转换为极坐标形式，数据以圆形布局呈现，各数据系列沿径向堆积，便于用户从中心向外查看各类别的累积数值。
实现思路
使用 fromJSON 方法加载预定义的表格模板和数据图表配置
创建数据图表配置面板，允许用户通过界面调整图表属性
选中第一个数据图表，使其在加载后处于可编辑状态
根据运行环境自动判断是否显示设计器界面
代码解析
加载模板和数据图表
这段代码通过 fetch 获取预定义的 JSON 模板文件，然后使用 fromJSON 方法异步加载到 Spread 实例中。模板中包含了极坐标放射堆积柱状图的完整配置。
创建配置面板
创建数据图表配置面板，第一个参数是宿主元素的 ID，第二个参数是 Workbook 实例。配置面板为用户提供了可视化的图表属性编辑界面。
选中数据图表
通过 dataCharts.all() 获取工作表中的所有数据图表，然后选中第一个图表。isSelected(true) 方法将图表设置为选中状态，方便用户直接进行编辑操作。
运行效果
页面加载后显示预定义的极坐标放射堆积柱状图
右侧显示数据图表配置面板，用户可以通过面板调整图表的各种属性
图表自动处于选中状态，用户可以直接进行移动、调整大小等操作
数据以圆形格式呈现，各部分沿径向堆积，清晰展示各类别数据的累积效果
API 参考
fromJSON 方法
workbookData：要加载的 JSON 数据对象
deserializationOptions：可选，反序列化选项（如忽略样式、公式等）
DataChartConfigPanel 构造函数
host：宿主元素，可以是字符串（元素 ID 或选择器）或 HTMLElement 对象
spread：Workbook 实例
isSelected 方法
value：可选，布尔值，设置图表是否被选中
返回值：获取或设置数据图表的选中状态
dataCharts.all 方法
返回值：工作表中所有数据图表的数组
window.onload = async () => {
const loadingTip = addLoadingTip();
const { spread, designer } = createSpreadAndDesigner();
const res = await fetch('$DEMOROOT$/zh/sample/features/data-charts/chart-types/radial-stacked-bar/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%;
}
