概述
本 Demo 展示了如何在 SpreadJS 中创建漏斗图。Demo 在两个工作表中分别演示了两种数据绑定方式：第一个工作表使用类别-值绑定，展示了标准漏斗图、水平漏斗图、条形漏斗图和金字塔漏斗图；第二个工作表使用详情-值绑定，展示了可自定义形状参数的漏斗图变体。
实现思路
通过数据管理器初始化销售转化数据表（包含 Stage 和 Count 两个字段）
创建两个工作表，分别展示类别-值绑定和详情-值绑定的漏斗图
在每个工作表中添加 4 个漏斗图，通过不同的配置参数展示：标准漏斗图、水平漏斗图、条形漏斗图和金字塔漏斗图
使用 setChartConfig 方法配置数据绑定、漏斗形状和样式
代码解析
初始化数据表
这段代码使用数据管理器创建名为 'Conversion' 的数据表，包含 Stage（阶段）和 Count（数量）两个字段，数据源是一个二维数组转换为对象数组的结构。
类别-值绑定模式
这是类别-值绑定的基础示例。encodings.category 指定分类字段为 'Stage'，encodings.values 指定数值字段为 'Count' 并使用 sum 聚合。在这种模式下，分段通过顶部宽度表示数据大小，漏斗侧边呈现非平滑效果。
详情-值绑定模式
这是详情-值绑定的示例。encodings.details 指定详情字段为 'Stage'。在这种模式下，分段通过高度表示数据大小，并且可以自定义漏斗的形状参数：topWidth 控制顶部宽度，bottomWidth 控制底部宽度，neckHeight 控制颈部高度。漏斗侧边呈现平滑效果。
配置漏斗类型和方向
funnelType 属性控制漏斗的形状类型：default 表示标准漏斗（上部梯形、底部矩形），bar 表示条形漏斗（所有分段为矩形），pyramid 表示金字塔漏斗（上部梯形、底部三角形）。orientation 属性控制漏斗的方向：垂直或水平。
运行效果
第一个工作表 "Category + Value" 展示了 4 种类别-值绑定的漏斗图：标准漏斗图、水平漏斗图、条形漏斗图和金字塔漏斗图
第二个工作表 "Detail + Value" 展示了 4 种详情-值绑定的漏斗图：标准漏斗图、水平漏斗图、梯形漏斗图和金字塔漏斗图
所有图表都包含标题、图例和颜色映射，可直接在 SpreadJS 设计器中查看和交互
API 参考
dataCharts.add 方法
name：数据图表名称
x、y：图表位置
width、height：图表尺寸
chartType：图表类型，漏斗图使用 GC.Spread.Sheets.DataCharts.DataChartType.funnel
setChartConfig 方法
用于配置数据图表的数据绑定、样式和布局。
漏斗图专属配置
在 plots[].config.funnel 中配置：
funnelType：漏斗类型
orientation：方向（horizontal/vertical）
topWidth：顶部宽度（0-1）
bottomWidth：底部宽度（0-1）
neckHeight：颈部高度（0-1）
window.onload = async () => {
const { spread, designer } = createSpreadAndDesigner();
await initDataManager(spread);
const sheet1 = spread.getSheet(0);
sheet1.name('Category + Value');
const dataChart11 = sheet1.dataCharts.add('chart11', 20, 20, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart11.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Stage' },
},
}],
config: {
header: {
title: 'Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart12 = sheet1.dataCharts.add('chart12', 490, 20, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart12.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Stage' },
},
config: {
funnel: {
orientation: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
},
},
}],
config: {
header: {
title: 'Horizontal Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart13 = sheet1.dataCharts.add('chart13', 20, 340, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart13.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Stage' },
},
config: {
funnel: {
funnelType: GC.Spread.Sheets.DataCharts.FunnelType.bar,
},
},
}],
config: {
header: {
title: 'Bar Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart14 = sheet1.dataCharts.add('chart14', 490, 340, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart14.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Stage' },
},
config: {
funnel: {
funnelType: GC.Spread.Sheets.DataCharts.FunnelType.pyramid,
},
},
}],
config: {
header: {
title: 'Pyramid Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const sheet2 = spread.getSheet(1);
sheet2.name('Detail + Value');
const dataChart21 = sheet2.dataCharts.add('chart21', 20, 20, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart21.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
details: [{ field: 'Stage' }],
},
config: {
funnel: {
topWidth: 1,
bottomWidth: 0.2,
neckHeight: 0.3,
},
},
}],
config: {
header: {
title: 'Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart22 = sheet2.dataCharts.add('chart22', 490, 20, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart22.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
details: [{ field: 'Stage' }],
},
config: {
funnel: {
topWidth: 1,
bottomWidth: 0.2,
neckHeight: 0.3,
orientation: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
},
},
}],
config: {
header: {
title: 'Horizontal Funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart23 = sheet2.dataCharts.add('chart23', 20, 340, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart23.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
details: [{ field: 'Stage' }],
},
config: {
funnel: {
topWidth: 1,
bottomWidth: 0.3,
neckHeight: 0,
},
},
}],
config: {
header: {
title: 'Trapezoid funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
const dataChart24 = sheet2.dataCharts.add('chart24', 490, 340, 450, 300, GC.Spread.Sheets.DataCharts.DataChartType.funnel);
dataChart24.setChartConfig({
tableName: 'Conversion',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
encodings: {
values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
details: [{ field: 'Stage' }],
},
config: {
funnel: {
topWidth: 1,
bottomWidth: 0,
neckHeight: 0,
},
},
}],
config: {
header: {
title: 'Pyramid funnel Chart',
padding: {
left: 16,
right: 16,
top: 5,
bottom: 0,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
textStyle: {
color: 'rgba(51,51,51,1)',
fontFamily: 'Calibri',
fontSize: 12,
},
}],
}],
},
});
spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
if (designer) {
designer.refresh();
}
}
function createSpreadAndDesigner() {
const demoHost = document.getElementById('demo-host');
if (window !== top) {
const spread = new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 2 });
new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread);
return {
spread
}
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 2 });
return {
designer,
spread: designer.getWorkbook(),
}
}
}
async function initDataManager(spread) {
const records = [
['Website Visits', 10000],
['User Registration', 6900],
['Activation', 5000],
['First Purchase', 2200],
['Month 2 Retention', 1000],
];
const columns = ['Stage', 'Count'];
await spread.dataManager().addTable('Conversion', {
data: records.map(record => {
const item = {};
columns.forEach((column, index) => {
item[column] = record[index];
});
return item;
}),
}).fetch();
}
<!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%;
}
