概述
本示例展示了如何在 SpreadJS 数据图表中使用层级分类（Hierarchical Category），让分类轴按多级字段进行嵌套分组展示。
示例会为多种图表类型分别创建一个工作表，并基于销售数据与股票数据生成图表。销售类图表使用“区域 -> 销售员”的层级分类，股票类图表使用“月份 -> 日期”的层级分类，以便直观看到多级分类轴在不同图表类型中的表现。
实现思路
页面加载后先创建 Workbook，并根据运行环境决定是否启用 Designer 宿主或独立配置面板。
通过 dataManager.addTable 向工作簿注册 Sales 和 Stock 两张数据表，分别作为普通分类图表和金融图表的数据源。
预先定义多种图表配置，包括图表名称、图表类型、绑定表名和编码方式。
遍历这些配置，为每个图表类型创建一个工作表，并调用统一的 addChartToSheet 方法完成图表绑定。
在图表编码中通过 category.child 定义层级分类字段，从而实现多级分类轴展示。
代码解析
示例入口首先创建 SpreadJS 实例，再初始化数据管理器。等数据表准备完成后，才开始批量创建图表：
图表并不是写死在某一张表里，而是根据 chartConfigs 动态生成多个工作表。每个工作表只承载一种图表类型，这样便于分别观察层级分类在不同图表中的效果：
层级分类的关键在于 category 编码对象中的 child 属性。销售图表把“区域”作为一级分类，“销售员”作为二级分类；股票图表则使用“月份”与“日期”组合分类：
addChartToSheet 会根据图表编码类型决定 encodings 的结构。例如普通单值图只绑定一个数值字段，堆积图会额外绑定颜色字段，OHLC / 蜡烛图则需要 open、high、low、close 四个向量字段：
图表最终通过 setChartConfig 绑定到指定数据表，并设置标题。这里的标题也会直接反映当前图表类型和“层级分类”这一主题：
示例还额外兼容了两种宿主模式：如果当前页面运行在 iframe 中，就只创建工作簿和图表配置面板；如果是顶层窗口，则直接创建 Designer。这让同一个 demo 既可以嵌入示例系统，也可以在设计器中查看和调整图表配置。
运行效果
页面加载后会自动生成多张工作表，每张表对应一种支持层级分类的数据图表类型。
销售图表会按“区域 -> 销售员”展示多级分类轴；堆积类图表还会按产品进一步区分颜色。
蜡烛图和 OHLC 图表会按“月份 -> 日期”展示金融数据的层级分类。
在顶层页面中，图表会显示在 Designer 环境里；在嵌入模式下，则会显示独立的图表配置面板。
默认会选中第一张工作表中的第一个图表，便于用户打开后立即查看当前配置。
API 参考
spread.dataManager().addTable(name, options)
用于向工作簿注册图表绑定所需的数据表。
sheet.dataCharts.add(name, x, y, width, height, type)
用于在工作表中创建指定类型的数据图表。
dataChart.setChartConfig(config)
用于配置图表绑定表名、图表类型、编码方式以及标题等属性。
category.child
用于在分类编码中定义下一层分类字段，是实现层级分类的关键。
window.onload = async () => {
const { spread, designer } = createSpreadAndDesigner();
await initDataManager(spread);
const DataChartType = GC.Spread.Sheets.DataCharts.DataChartType;
const Aggregate = GC.Spread.Sheets.DataCharts.Aggregate;
const chartConfigs = [
{ name: '柱形图', type: DataChartType.column, table: 'Sales', encoding: 'single' },
{ name: '区间柱形图', type: DataChartType.rangeColumn, table: 'Sales', encoding: 'range' },
{ name: '堆积柱形图', type: DataChartType.stackedColumn, table: 'Sales', encoding: 'stacked' },
{ name: '百分比堆积柱形图', type: DataChartType.percentStackedColumn, table: 'Sales', encoding: 'stacked' },
{ name: '条形图', type: DataChartType.bar, table: 'Sales', encoding: 'single' },
{ name: '区间条形图', type: DataChartType.rangeBar, table: 'Sales', encoding: 'range' },
{ name: '堆积条形图', type: DataChartType.stackedBar, table: 'Sales', encoding: 'stacked' },
{ name: '百分比堆积条形图', type: DataChartType.percentStackedBar, table: 'Sales', encoding: 'stacked' },
{ name: '面积图', type: DataChartType.area, table: 'Sales', encoding: 'single' },
{ name: '区间面积图', type: DataChartType.rangeArea, table: 'Sales', encoding: 'range' },
{ name: '堆积面积图', type: DataChartType.stackedArea, table: 'Sales', encoding: 'stacked' },
{ name: '百分比堆积面积图', type: DataChartType.percentStackedArea, table: 'Sales', encoding: 'stacked' },
{ name: '折线图', type: DataChartType.line, table: 'Sales', encoding: 'single' },
{ name: '蜡烛图', type: DataChartType.candlestick, table: 'Stock', encoding: 'ohlc' },
{ name: 'OHLC', type: DataChartType.ohlc, table: 'Stock', encoding: 'ohlc' },
];
spread.setSheetCount(chartConfigs.length);
for (let i = 0; i < chartConfigs.length; i++) {
const cfg = chartConfigs[i];
const sheet = spread.getSheet(i);
sheet.name(cfg.name);
addChartToSheet(sheet, cfg, Aggregate);
}
spread.setActiveSheetIndex(0);
spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
if (designer) {
designer.refresh();
}
}
function addChartToSheet(sheet, cfg, Aggregate) {
const dataChart = sheet.dataCharts.add(cfg.name, 20, 20, 450, 300, cfg.type);
let encodings;
const hierarchicalCategory = {
field: 'Region',
child: { field: 'Salesman' }
};
const ohlcHierarchicalCategory = {
field: 'month',
child: { field: 'day' }
};
switch (cfg.encoding) {
case 'single':
encodings = {
values: [{ field: 'Sales', aggregate: Aggregate.sum }],
category: hierarchicalCategory,
};
break;
case 'range':
encodings = {
values: [{
vectors: {
upper: { field: 'Sales' },
lower: { field: 'Return' },
},
aggregate: Aggregate.sum,
}],
category: hierarchicalCategory,
};
break;
case 'stacked':
encodings = {
values: [{ field: 'Sales', aggregate: Aggregate.sum }],
category: hierarchicalCategory,
color: { field: 'Product' },
};
break;
case 'ohlc':
encodings = {
values: [{
vectors: {
open: { field: 'open' },
high: { field: 'high' },
low: { field: 'low' },
close: { field: 'close' },
},
}],
category: ohlcHierarchicalCategory,
};
break;
}
dataChart.setChartConfig({
tableName: cfg.table,
plots: [{
type: cfg.type,
encodings: encodings,
}],
config: {
header: {
title: cfg.name + ' - 层级分类',
padding: { left: 10, right: 10, top: 10, bottom: 10 },
textStyle: {
fontSize: 16,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
}
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 dataManager = spread.dataManager();
await dataManager.addTable('Sales', {
data: [
{ Region: '东区', Salesman: '艾丽丝', Product: '笔记本', Sales: 450, Return: 120 },
{ Region: '东区', Salesman: '艾丽丝', Product: '手机', Sales: 320, Return: 85 },
{ Region: '东区', Salesman: '鲍勃', Product: '笔记本', Sales: 380, Return: 95 },
{ Region: '东区', Salesman: '鲍勃', Product: '手机', Sales: 290, Return: 70 },
{ Region: '东区', Salesman: '卡罗尔', Product: '笔记本', Sales: 410, Return: 110 },
{ Region: '东区', Salesman: '卡罗尔', Product: '手机', Sales: 350, Return: 90 },
{ Region: '西区', Salesman: '戴夫', Product: '笔记本', Sales: 520, Return: 140 },
{ Region: '西区', Salesman: '戴夫', Product: '手机', Sales: 280, Return: 65 },
{ Region: '西区', Salesman: '伊芙', Product: '笔记本', Sales: 470, Return: 130 },
{ Region: '西区', Salesman: '伊芙', Product: '手机', Sales: 310, Return: 80 },
{ Region: '西区', Salesman: '弗兰克', Product: '笔记本', Sales: 390, Return: 100 },
{ Region: '西区', Salesman: '弗兰克', Product: '手机', Sales: 260, Return: 60 },
{ Region: '北区', Salesman: '格蕾丝', Product: '笔记本', Sales: 340, Return: 90 },
{ Region: '北区', Salesman: '格蕾丝', Product: '手机', Sales: 270, Return: 75 },
{ Region: '北区', Salesman: '汉克', Product: '笔记本', Sales: 430, Return: 115 },
{ Region: '北区', Salesman: '汉克', Product: '手机', Sales: 300, Return: 80 },
{ Region: '南区', Salesman: '艾薇', Product: '笔记本', Sales: 480, Return: 125 },
{ Region: '南区', Salesman: '艾薇', Product: '手机', Sales: 330, Return: 85 },
{ Region: '南区', Salesman: '杰克', Product: '笔记本', Sales: 360, Return: 95 },
{ Region: '南区', Salesman: '杰克', Product: '手机', Sales: 250, Return: 55 },
],
}).fetch();
await dataManager.addTable('Stock', {
data: [
{ month: '1月', day: '1月-01', open: 150.00, high: 155.20, low: 148.50, close: 153.80 },
{ month: '1月', day: '1月-02', open: 153.80, high: 157.40, low: 152.10, close: 156.90 },
{ month: '1月', day: '1月-03', open: 156.90, high: 158.60, low: 154.30, close: 155.20 },
{ month: '1月', day: '1月-04', open: 155.20, high: 159.80, low: 154.00, close: 158.50 },
{ month: '1月', day: '1月-05', open: 158.50, high: 162.30, low: 157.20, close: 161.00 },
{ month: '2月', day: '2月-01', open: 161.00, high: 163.50, low: 159.80, close: 162.40 },
{ month: '2月', day: '2月-02', open: 162.40, high: 165.70, low: 161.30, close: 164.80 },
{ month: '2月', day: '2月-03', open: 164.80, high: 166.20, low: 162.50, close: 163.10 },
{ month: '2月', day: '2月-04', open: 163.10, high: 167.90, low: 162.00, close: 167.30 },
{ month: '2月', day: '2月-05', open: 167.30, high: 170.10, low: 166.50, close: 169.20 },
{ month: '3月', day: '3月-01', open: 169.20, high: 172.40, low: 168.00, close: 171.50 },
{ month: '3月', day: '3月-02', open: 171.50, high: 173.80, low: 169.60, close: 170.30 },
{ month: '3月', day: '3月-03', open: 170.30, high: 174.50, low: 169.10, close: 173.90 },
{ month: '3月', day: '3月-04', open: 173.90, high: 176.20, low: 172.30, close: 175.60 },
{ month: '3月', day: '3月-05', open: 175.60, high: 178.00, low: 174.20, close: 176.80 },
],
}).fetch();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="spreadjs culture" content="zh-cn" />
<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-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%;
}
