在数据分析场景中，趋势线可以帮助我们从 Excel 图表中直观地看出数据的变动趋势和预测方向。Spire.XLS for JavaScript 提供了丰富的趋势线 API，支持在浏览器端通过 WebAssembly 直接为图表系列添加多种类型的趋势线，无需后端服务。

本文介绍两个核心功能点：

• 为图表添加趋势线
• 提取趋势线公式

有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。

为图表添加趋势线

通过 chart.Series.get(i).TrendLines.Add() 方法可以为图表中的任意系列添加趋势线。Spire.XLS for JavaScript 支持 TrendLineType 枚举中的 4 种趋势线类型：

• Linear — 线性趋势线，适用于数据呈稳定增减的场景
• Exponential — 指数趋势线，适用于增长或衰退速度越来越快的场景
• Logarithmic — 对数趋势线，适用于数据快速增长后趋于平稳的场景
• Moving_Average — 移动平均趋势线，适用于平滑数据波动的场景

具体操作步骤如下：

1. 创建一个 Workbook 对象并获取第一个工作表。
2. 通过 Worksheet.Charts.get(i) 获取需要添加趋势线的图表。
3. 调用 chart.Series.get(0).TrendLines.Add() 方法，传入 type 参数指定趋势线类型。
4. 通过 Workbook.SaveToFile() 方法保存工作簿。

下面是一个完整的代码示例，展示了在 React 中为 Excel 图表添加四种不同类型的趋势线：

function App() {
  const addTrendline = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将 Excel 文件载入 VFS
    const inputFileName = 'ChartTrendline.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    let sheet = workbook.Worksheets.get(0);

    // 选择第 1 个图表并设置对数趋势线
    let chart = sheet.Charts.get(0);
    chart.ChartTitle = "对数趋势线";
    chart.Series.get(0).TrendLines.Add({ type: xlsModule.TrendLineType.Logarithmic });

    // 选择第 2 个图表并设置移动平均趋势线
    let chart1 = sheet.Charts.get(1);
    chart1.ChartTitle = "移动平均趋势线";
    chart1.Series.get(0).TrendLines.Add({ type: xlsModule.TrendLineType.Moving_Average });

    // 选择第 3 个图表并设置线性趋势线
    let chart2 = sheet.Charts.get(2);
    chart2.ChartTitle = "线性趋势线";
    chart2.Series.get(0).TrendLines.Add({ type: xlsModule.TrendLineType.Linear });

    // 选择第 4 个图表并设置指数趋势线
    let chart3 = sheet.Charts.get(3);
    chart3.ChartTitle = "指数趋势线";
    chart3.Series.get(0).TrendLines.Add({ type: xlsModule.TrendLineType.Exponential });

    // 保存文档
    const outputFileName = 'AddTrendline.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2013 });

    // 释放资源
    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={addTrendline}>Start</button>
    </div>
  );
}

export default App;

运行代码后，得到为图表添加四种不同类型趋势线的效果：

提取趋势线公式

通过 trendLine.Formula 属性可以获取趋势线的数学公式，便于在报告中展示趋势线的解析表达式。

具体操作步骤如下：

1. 加载版块一生成的包含四个图表的 AddTrendline.xlsx 文件。
2. 通过 Worksheet.Charts.get(i) 遍历获取四个图表。
3. 读取每个图表中 trendLine.Formula 属性获取公式字符串，汇总保存为文本文件。

下面是一个完整的代码示例，展示了在 React 中提取趋势线公式：

function App() {
  const extractTrendlineFormula = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将版块一生成的 AddTrendline.xlsx 载入 VFS
    const inputFileName = 'AddTrendline.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    let sheet = workbook.Worksheets.get(0);
    let result = "提取四个图表的趋势线公式如下：\n\n";

    // 遍历四个图表，依次提取趋势线公式
    for (let i = 0; i < 4; i++) {
      let chart = sheet.Charts.get(i);
      let trendLine = chart.Series.get(0).TrendLines.get(0);
      // 移动平均趋势线没有数学公式，跳过
      if (trendLine.Type === xlsModule.TrendLineType.Moving_Average) {
        result += `图表 ${i + 1} (${chart.ChartTitle}): 无公式（移动平均）\n`;
      } else {
        let formula = trendLine.Formula;
        result += `图表 ${i + 1} (${chart.ChartTitle}): ${formula}\n`;
      }
    }

    // 释放资源
    workbook.Dispose();

    // 将公式保存为文本文件并触发下载
    const outputFileName = 'ExtractTrendline.txt';
    const blob = new Blob([result], { type: "text/plain;charset=utf-8" });
    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={extractTrendlineFormula}>Start</button>
    </div>
  );
}

export default App;

运行代码后，得到提取趋势线公式的效果：

常见问题

如何删除图表中已添加的趋势线？

原因：已经为图表添加了趋势线，但发现选择不当或需要修改。

解决：通过 TrendLines.RemoveAt(index) 方法可以删除指定索引位置的趋势线。索引从 0 开始计数。例如 chart.Series.get(0).TrendLines.RemoveAt(0) 删除第一个系列的第一个趋势线。

如何设置趋势线向前/向后预测的周期数？

原因：趋势线不仅可以拟合已有数据，还可以基于数据趋势进行未来（向前）或过去（向后）的预测。

解决：通过 trendLine.Forward 和 trendLine.Backward 属性分别设置向前和向后预测的周期数。例如 trendLine.Forward = 2 表示在当前数据基础上向后预测两个周期，trendLine.Backward = 1 表示向前回溯一个周期。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。