图表画出的是均值，看不出这组数据有多稳。同样是一条上升的折线，背后可能是六次几乎一致的测量，也可能是六次忽高忽低的读数——只盯曲线是分不出来的。误差线正是用来补上这一层信息：它在每个数据点上画出一段短线，标明该点的波动或不确定范围，让读者知道曲线上的每个拐点有多少可信度。百分比误差线按数值的固定比例给出范围，标准误差线则依据数据本身的标准误差计算，两者适用于不同的场景。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
为折线图添加百分比误差线
百分比误差线以数据点自身的数值为基数，按给定的百分比算出误差量。例如设为 10 时，数值为 4.0 的点误差量就是 0.4；至于这段长度画在数据点的哪一侧，则由另一个参数决定。这类误差线适合表达「允许偏差」——计划产量允许上下浮动一成，或是仪器读数有固定的相对精度。误差线挂在系列上，因此要先取到系列对象，再调用它的 ErrorBar 方法。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 添加折线图，把数据区域指向计划产量一列。
- 把月份一列设为分类标签。
- 为系列添加百分比误差线，指定方向与误差量并保存工作簿。
以下为完整的代码示例，演示如何在 React 中为折线图添加百分比误差线：
function App() {
const addPercentageErrorBar = 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 = 'ErrorBarChartData.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 chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.Line });
chart.ChartTitle = "计划产量";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
chart.DataRange = sheet.Range.get("B1:B7");
chart.SeriesDataFromRange = false;
// 设置图表在工作表中的位置
chart.TopRow = 9;
chart.BottomRow = 26;
chart.LeftColumn = 1;
chart.RightColumn = 9;
// 取到系列，把月份一列设为分类标签
const serie = chart.Series.get(0);
serie.CategoryLabels = sheet.Range.get("A2:A7");
// 为系列添加百分比误差线：方向为正，误差量为 10%
serie.ErrorBar({
bIsY: true,
include: xlsModule.ErrorBarIncludeType.Plus,
type: xlsModule.ErrorBarType.Percentage,
numberValue: 10.0,
});
// 保存工作簿
const outputFileName = "PercentageErrorBar.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={addPercentageErrorBar}>Start</button>
</div>
);
}
export default App;
运行后，为折线图添加百分比误差线的效果：
为柱状图添加标准误差线
标准误差线不依赖人工给定的百分比，而是由系列自身的数据算出标准误差——数值波动大的系列，误差线自然就长。这也是它和百分比误差线的分工：前者描述「这组数据本身有多稳」，后者描述「我们允许它偏多少」。柱状图常用来并排比较多组数据，若两组都挂上标准误差线，就能一眼看出哪一组的读数更集中。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 添加柱状图，数据区域同时覆盖计划产量与实际产量两列。
- 为两个系列分别添加标准误差线。
- 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为柱状图添加标准误差线：
function App() {
const addStandardErrorBar = 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 = 'ErrorBarChartData.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 chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.ColumnClustered });
chart.ChartTitle = "计划产量与实际产量";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
chart.DataRange = sheet.Range.get("B1:C7");
chart.SeriesDataFromRange = false;
// 设置图表在工作表中的位置
chart.TopRow = 9;
chart.BottomRow = 26;
chart.LeftColumn = 1;
chart.RightColumn = 9;
// 取到第一个系列，把月份一列设为分类标签
const serie = chart.Series.get(0);
serie.CategoryLabels = sheet.Range.get("A2:A7");
// 第一个系列画标准误差线，方向为负
serie.ErrorBar({
bIsY: true,
include: xlsModule.ErrorBarIncludeType.Minus,
type: xlsModule.ErrorBarType.StandardError,
numberValue: 0.3,
});
// 第二个系列也画标准误差线，方向为正负双向
const serie2 = chart.Series.get(1);
serie2.ErrorBar({
bIsY: true,
include: xlsModule.ErrorBarIncludeType.Both,
type: xlsModule.ErrorBarType.StandardError,
numberValue: 0.5,
});
// 保存工作簿
const outputFileName = "StandardErrorBar.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={addStandardErrorBar}>Start</button>
</div>
);
}
export default App;
运行后，为柱状图添加标准误差线的效果：
常见问题
误差线支持哪些方向？
误差线的方向由 ErrorBar 的 include 参数决定，取 ErrorBarIncludeType 中的三个值：
| 取值 | 效果 |
|---|---|
Both |
正负偏差，数据点上下各画一段 |
Minus |
负偏差，只画数据点以下的部分 |
Plus |
正偏差，只画数据点以上的部分 |
// 正负双向都要画
serie.ErrorBar({
bIsY: true,
include: xlsModule.ErrorBarIncludeType.Both,
type: xlsModule.ErrorBarType.Percentage,
numberValue: 10.0,
});
方向只决定误差线画在数据点的哪一侧，不改变长度：同一组参数下，三种方向取到的误差量完全相同。
支持哪些误差量类型？
误差量类型由 ErrorBar 的 type 参数决定，取 ErrorBarType 中的五个值：
| 类型 | 说明 |
|---|---|
Fixed |
固定值，误差量由 numberValue 指定 |
Percentage |
百分比，按数据点数值的百分比换算 |
StandardDeviation |
标准偏差，误差量由 numberValue 指定 |
StandardError |
标准误差，长度由系列数据算出，numberValue 不参与 |
Custom |
自定义，按区域给出正负两侧的误差量 |
前四种的误差量都写在 numberValue 里：
serie.ErrorBar({
bIsY: true,
include: xlsModule.ErrorBarIncludeType.Both,
type: xlsModule.ErrorBarType.StandardDeviation,
numberValue: 2,
});
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
