一张图表能让人看清一组数据的走势，却很难让人同时看清几十组数据的走势。迷你图（Sparkline）正是为此而生：它把一条趋势线压缩进单个单元格，没有坐标轴也没有图例，却能让整列趋势在扫视中一览无余。把各地区、各季度的销售数字逐行配上迷你图，哪一行的曲线在爬升、哪一行在中途掉头，往往比读一列数字快得多。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
添加折线迷你图
折线迷你图把一行数值按顺序连成一条细线，走势的升降一目了然。它不占单元格的位置，也不会遮住单元格里的数字，一小列宽度就能排下几十行的走势，哪一行在爬升、哪一行中途掉头，扫一眼便知。迷你图不能脱离迷你图组单独存在，同一批迷你图的类型、颜色和标记样式由组统一决定。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得第一个工作表。
- 用
SparklineGroups.AddGroup()新建折线迷你图组，设置线条粗细与数据点标记颜色。 - 用
Add()取到组内的迷你图集合，为每一行数据在 F 列生成一个迷你图。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为 Excel 数据添加折线迷你图：
function App() {
const addLineSparkline = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和测试数据文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'SparklineData.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿，取第一个工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 在工作表上新建一个折线迷你图组
const sparklineGroup = sheet.SparklineGroups.AddGroup({ sparklineType: xlsModule.SparklineType.Line });
// 设置折线样式：加粗线条并显示数据点标记
sparklineGroup.LineWeight = 1.5;
sparklineGroup.ShowMarkers = true;
sparklineGroup.MarkersColor = xlsModule.Color.get_Red();
// 取到组内的迷你图集合
const sparklines = sparklineGroup.Add();
// 为每一行数据在 F 列生成一个迷你图
for (let row = 2; row <= 9; row++) {
sparklines.Add({
dataRange: sheet.Range.get(`B${row}:E${row}`),
referenceRange: sheet.Range.get(`F${row}`),
});
}
// 保存工作簿
const outputFileName = 'AddLineSparkline.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放 workbook 对象以释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>折线迷你图</h1>
<button onClick={addLineSparkline}>Start</button>
</div>
);
}
export default App;
运行后，添加折线迷你图的效果：
添加柱形迷你图并突出最高点与最低点
柱形迷你图用一排细柱表示数值大小，比较同一行里几个数的高低时比折线更直观。它的用法与折线迷你图一致，区别在于颜色落在每根柱子本身，而不是一条连线上。
真正让柱形迷你图好用的是高低点标记：一行里最高的那一季和最矮的那一季会被自动找出来单独着色，峰值和低谷不必再对着数字比较。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得第一个工作表。
- 用
SparklineGroups.AddGroup()新建柱形迷你图组（类型传SparklineType.Column），并用SparklineColor设置系列颜色。 - 打开
ShowHighPoint与ShowLowPoint，分别用HighPointColor与LowPointColor指定颜色。 - 用
Add()取到组内的迷你图集合，为每一行数据在 G 列生成一个迷你图并保存工作簿。
以下为完整的代码示例，演示如何在 React 中为 Excel 数据添加柱形迷你图并突出最高点与最低点：
function App() {
const addColumnSparkline = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和测试数据文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'SparklineData.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿，取第一个工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 新建一个柱形迷你图组
const sparklineGroup = sheet.SparklineGroups.AddGroup({ sparklineType: xlsModule.SparklineType.Column });
// 设置迷你图本身的颜色
sparklineGroup.SparklineColor = xlsModule.Color.get_CadetBlue();
// 打开最高点与最低点的标记，并分别指定颜色
sparklineGroup.ShowHighPoint = true;
sparklineGroup.HighPointColor = xlsModule.Color.get_Red();
sparklineGroup.ShowLowPoint = true;
sparklineGroup.LowPointColor = xlsModule.Color.get_Purple();
const sparklines = sparklineGroup.Add();
// 为每一行数据在 G 列生成一个迷你图
for (let row = 2; row <= 9; row++) {
sparklines.Add({
dataRange: sheet.Range.get(`B${row}:E${row}`),
referenceRange: sheet.Range.get(`G${row}`),
});
}
// 保存工作簿
const outputFileName = 'AddColumnSparkline.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放 workbook 对象以释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>柱形迷你图</h1>
<button onClick={addColumnSparkline}>Start</button>
</div>
);
}
export default App;
运行后，添加柱形迷你图并突出最高点与最低点的效果：
清除工作表上的迷你图
报表改版或数据口径变化时，原本标在旁边的迷你图可能不再适用，需要整批清掉重画。迷你图组由工作表持有，清掉之后单元格回到普通状态，其中的数据和其他格式都不受影响。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得第二个工作表，其上已带有一组折线迷你图。
- 用
SparklineGroups.Clear()清除该工作表中的全部迷你图组。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中清除工作表上的迷你图：
function App() {
const clearSparklines = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和测试数据文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'SparklineData.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿，取第二个工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(1);
// 清除该工作表中的全部迷你图组
sheet.SparklineGroups.Clear();
// 保存工作簿
const outputFileName = 'ClearSparklines.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放 workbook 对象以释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>清除迷你图</h1>
<button onClick={clearSparklines}>Start</button>
</div>
);
}
export default App;
运行后，清除工作表上的迷你图的效果：
常见问题
遍历单元格读不到已添加的迷你图
原因：迷你图不是单元格内容。它归工作表上的迷你图组所有，画在落点单元格之上，自身的数据和设置则写在工作表的扩展区里，因此逐个单元格读取时落点列始终是空值，单元格上也没有接口可以问出「这里有没有迷你图」。
解决：改从工作表级的 SparklineGroups 读取。get_Item(0) 取到第一组，组上的 SparklineType 即可判断这一批是折线还是柱形，颜色等设置也在同一处读取：
const group = sheet.SparklineGroups.get_Item(0);
console.log(group.SparklineType); // SparklineType.Line 或 SparklineType.Column
柱形迷你图上设置线条粗细和标记点没有效果
原因：LineWeight 与 ShowMarkers 只对折线迷你图生效。柱形迷你图用柱子表示数值，既没有连线也没有数据点标记，即使赋值成功也不会写入结果文件。
解决：需要线条和标记时，把迷你图组建成折线类型再设置：
const sparklineGroup = sheet.SparklineGroups.AddGroup({ sparklineType: xlsModule.SparklineType.Line });
sparklineGroup.LineWeight = 1.5;
sparklineGroup.ShowMarkers = true;
sparklineGroup.MarkersColor = xlsModule.Color.get_Red();
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
