概述
本 Demo 展示了如何在 SpreadJS 中创建漏斗图并自定义图表样式。Demo 包含两个工作表：第一个展示基本的漏斗图，第二个演示如何自定义图表区域背景、数据标签、系列颜色和标题等样式。
实现思路
创建两个工作表，分别用于展示基本漏斗图和自定义样式的漏斗图
准备产品电子邮件营销活动的阶段数据（发送、查看、点击、加入购物车、购买）
使用 charts.add 方法创建漏斗图，指定图表类型为 GC.Spread.Sheets.Charts.ChartType.funnel
在第二个工作表中应用自定义样式：
设置图表区域背景为图案填充
显示数据标签并设置白色文本
设置系列背景颜色为绿色
添加图表标题
代码解析
创建漏斗图
这段代码使用 charts.add 方法创建漏斗图。参数依次为图表名称、图表类型、x 坐标、y 坐标、宽度、高度和数据范围。GC.Spread.Sheets.Charts.ChartType.funnel 指定图表类型为漏斗图。
设置图表区域背景图案
chartArea 方法获取图表区域对象，backColor 属性可以设置为颜色字符串或图案填充对象。图案填充包含 type（图案类型）、foregroundColor（前景色）和 backgroundColor（背景色）三个属性。
设置数据标签和系列颜色
dataLabels 方法获取数据标签对象，showValue 属性设置为 true 显示数值，color 设置文本颜色。通过 series().get(index) 获取系列对象，设置 backColor 属性更改系列颜色，最后使用 set 方法应用更改。
设置图表标题
title 方法获取标题对象，可以设置 text（标题文本）、fontSize（字体大小）等属性来自定义标题样式。
运行效果
第一个工作表 "funnelChart" 展示基本的漏斗图，显示产品电子邮件营销各阶段的用户数量
第二个工作表 "customStyle" 展示自定义样式的漏斗图，具有以下特点：
图表区域背景显示为绿色点状图案
数据标签显示数值，文本颜色为白色
系列背景颜色为绿色
图表标题显示为 "Product Email Campaign"
可以通过切换工作表查看两种不同的漏斗图样式
API 参考
charts.add 方法
name：图表名称
chartType：图表类型，使用 GC.Spread.Sheets.Charts.ChartType.funnel 创建漏斗图
x、y：图表在工作表中的位置
width、height：图表尺寸
dataRange：数据源范围
chart.chartArea 方法
获取或设置图表区域样式，支持背景颜色、边框、透明度等属性。
chart.dataLabels 方法
获取或设置数据标签样式，支持显示数值、类别名称、位置、颜色等属性。
chart.series 方法
获取系列集合，通过 get(index) 获取系列对象，修改后使用 set(index, series) 应用更改。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
// custom sheet style
setSheet(sheets);
setData(sheets[0], 'funnelChart');
initFunnel(sheets[0], GC.Spread.Sheets.Charts.ChartType.funnel);
setData(sheets[1], 'customStyle');
var customFunnelChart = initFunnel(sheets[1], GC.Spread.Sheets.Charts.ChartType.funnel);
setCustomStyle(customFunnelChart);
spread.resumePaint();
}
function setSheet(sheets) {
var columnWidths = [20, 100, 100];
for (var i = 0; i < sheets.length; i++) {
sheets[i].options.gridline.showHorizontalGridline = false;
sheets[i].options.gridline.showVerticalGridline = false;
sheets[i].getRange(1, 1, 6, 2)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheets[i].getRange(1, 1, 1, 2).font('bold normal 10pt Arial');
for (var j = 0; j < columnWidths.length; j++) {
sheets[i].setColumnWidth(j, columnWidths[j]);
}
}
}
function initFunnel(sheet, chartType) {
sheet.resumePaint();
return sheet.charts.add((sheet.name() + chartType), chartType, 400, 0, 500, 400, "B2:C7");
}
function setCustomStyle(chart) {
var chartArea = chart.chartArea();
chartArea.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20,
foregroundColor: "rgb(0,176,80)",
backgroundColor: "background 1 0",
};
chart.chartArea(chartArea);
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.color = 'white';
chart.dataLabels(dataLabels);
var seriesCollection = chart.series();
var series1 = seriesCollection.get(0);
series1.backColor = "green";
seriesCollection.set(0, series1);
var title = chart.title();
title.text = "Product Email Campaign";
title.fontSize = 16;
chart.title(title);
}
function setData(sheet, sheetName) {
sheet.name(sheetName);
sheet.suspendPaint();
var dataArray = [
['Stage', 'Users'],
['Sent', 5676],
['Viewed', 3872],
['Clicked', 1668],
['Add to Cart', 640],
['Purchased', 565],
];
sheet.setArray(1, 1, dataArray);
}
<!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">
<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$/spread/source/js/license.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="ss" class="sample-tutorial"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
