概述
本 Demo 展示了如何使用 SpreadJS 的 Excel 兼容迷你图函数在单元格中创建三种类型的迷你图：折线图、柱形图和盈亏图。Demo 包含三个工作表，分别演示了 LINESPARKLINE、COLUMNSPARKLINE 和 WINLOSSSPARKLINE 函数的使用方法，以及如何通过设置参数自定义迷你图显示效果。
实现思路
创建工作簿并设置 3 个工作表，分别用于展示三种迷你图类型
为每个工作表加载不同的数据源（销售数据、员工绩效数据）
使用 setFormula 方法为单元格设置迷你图公式
通过公式的 setting 参数配置迷你图的显示选项（如显示数据点标记、负值标记）
设置单元格格式、行高列宽，使迷你图显示效果更佳
代码解析
折线迷你图（Line Sparkline）
这段代码为第 3-12 行的数据创建折线迷你图。LINESPARKLINE 函数的第一个参数 C4:H4 指定数据范围，第二个参数 1 表示数据方向为水平（横向），最后的 "{showMarkers:true}" 设置显示数据点标记，让折线上的每个数据点都清晰可见。
柱形迷你图（Column Sparkline）
柱形迷你图的用法与折线图类似，只需将函数名改为 COLUMNSPARKLINE。这里使用了最简化的参数设置，只指定数据范围和方向，SpreadJS 会自动应用默认样式。
盈亏迷你图（Winloss Sparkline）
盈亏迷你图用于展示数据相对于基准值的正负情况。这里的数据范围使用表达式 C6:H6-$C$3，表示将每个数据点减去目标值（$C$3 单元格中的值 5），结果为正值显示为向上柱体，负值显示为向下柱体。"{showNegative:true}" 设置让负值柱体使用不同颜色显示，便于快速识别未达标情况。
运行效果
Line Sparkline 工作表：展示各国销售数据趋势，每个国家的销售走势通过折线图直观呈现，数据点标记清晰可见
Column Sparkline 工作表：以柱形图方式展示销售数据对比，每个柱体代表一个时间段的销售额
Winloss Sparkline 工作表：展示员工每周任务完成情况的盈亏图，正值（高于目标）显示为蓝色向上柱体，负值（低于目标）显示为红色向下柱体，便于快速识别绩效表现
API 参考
迷你图函数格式
参数说明：
data：迷你图的数据范围引用，如 "A1:C3"
dataOrientation：数据方向，0 为垂直，1 为水平
dateAxisData：（可选）日期轴数据范围
dateAxisOrientation：（可选）日期轴方向，0 为垂直，1 为水平
setting：（可选）JSON 格式的字符串，用于配置迷你图显示选项
常用的 setting 选项：
showMarkers：是否显示数据点标记（适用于折线图）
showNegative：是否使用不同颜色显示负值（适用于盈亏图）
showHigh、showLow：是否突出显示最高点和最低点
seriesColor：迷你图的主颜色
negativeColor：负值柱体的颜色
lineWeight：折线的粗细
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
spread.options.allowDynamicArray = true;
initSheet(spread.sheets[0]);
initSheet1(spread.sheets[1]);
initSheet2(spread.sheets[2]);
};
function initSheet(sheet) {
sheet.name("Line Sparkline");
sheet.suspendPaint();
sheet.setArray(2, 1, data[0]);
for(var i=4;i<14;i++)
{
sheet.setFormula(i-1, 8, '=LINESPARKLINE(C'+i+':H'+i+',1,,,"{showMarkers:true}")');
sheet.setRowHeight(i-1,30);
}
//format sheet
sheet.addSpan(0, 1, 1, 8);
sheet.getCell(0, 1).value("Sales by Country").font("bold 15px Arial")
.backColor("#DDDDDD");
sheet.setRowHeight(0,45);
sheet.getRange(2, 1, 1, 8)
.font("bold 13px Arial")
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
sheet.getRange(3, 2, 10, 6)
.formatter("$#,##0");
for(var j=2;j<8;j++)
{
sheet.setColumnWidth(j,80);
}
sheet.setColumnWidth(1,120);
sheet.setColumnWidth(8,150);
sheet.getRange(0, 0, 15, 9).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.resumePaint();
};
function initSheet1(sheet) {
sheet.name("Column Sparkline");
sheet.suspendPaint();
sheet.setArray(2, 1, data[1]);
for(var i=4;i<14;i++)
{
sheet.setFormula(i-1, 8, '=COLUMNSPARKLINE(C'+i+':H'+i+',1)');
sheet.setRowHeight(i-1,30);
}
//format sheet
sheet.addSpan(0, 1, 1, 8);
sheet.getCell(0, 1).value("Sales Data").font("15px Arial")
.backColor("#DDDDDD");
sheet.setRowHeight(0,45);
sheet.getRange(2, 1, 1, 8)
.font("bold 13px Arial")
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
sheet.getRange(3, 2, 10, 6)
.formatter("$#,##0");
for(var j=2;j<8;j++)
{
sheet.setColumnWidth(j,80);
}
sheet.setColumnWidth(1,120);
sheet.setColumnWidth(8,150);
sheet.getRange(0, 0, 15, 9).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.resumePaint();
};
function initSheet2(sheet) {
sheet.name("Winloss Sparkline");
sheet.suspendPaint();
sheet.getCell(2, 1).text("Target (tasks per week):").font("14px Arial");
sheet.getCell(2, 2).value(5).font("bold 14px Arial");
sheet.setArray(4, 1, data[2]);
for(var i=6;i<16;i++)
{
sheet.setFormula(i-1, 8, '=WINLOSSSPARKLINE(C'+i+':H'+i+'-$C$3,1,,,"{showNegative:true}")');
sheet.setRowHeight(i-1,30);
}
//format sheet
sheet.addSpan(0, 1, 1, 8);
sheet.getCell(0, 1).value("Employee Performance").font("15px Arial")
.backColor("#DDDDDD");
sheet.setRowHeight(0,45);
sheet.getRange(4, 1, 1, 8)
.font("bold 13px Arial")
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
sheet.setColumnWidth(1,180);
sheet.setColumnWidth(8,120);
sheet.getRange(0, 0, 15, 9).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<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-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 src="$DEMOROOT$/spread/source/data/standard-sparklines.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" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
