在日常数据分析中，散点图是观察两个数值变量之间关系的直观工具——例如研究产品价格与销量、收入与消费之间的相关趋势。通过散点图，可以快速识别数据点的分布规律和潜在关联。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接创建散点图，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 创建基础散点图
• 为散点图添加趋势线

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

创建基础散点图

散点图把两组数值分别放到横轴和纵轴上，用点的位置呈现它们的对应关系。相比只看表格，散点图更容易看出数据是集中还是分散、是否随一个变量上升而上升。把原始数据映射到图表，再确定图表在工作表中的位置，一张散点图便可用于观察变量之间的关系。

创建基础散点图的写法与结果：

具体操作步骤如下：

1. 将字体文件与原始数据文件载入 VFS。
2. 创建 Workbook 对象，用 Workbook.LoadFromFile() 载入 Excel 文档，再通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 Worksheets.Charts.Add() 方法并指定 ScatterMarkers 图表类型添加散点图。
4. 设置图表的 DataRange 与 SeriesDataFromRange，并通过 Series.get(0).CategoryLabels 和 Series.get(0).Values 指定横轴与纵轴数据。
5. 通过 LeftColumn、TopRow、RightColumn、BottomRow 属性设置图表位置。
6. 通过 ChartTitle 属性设置图表标题，并通过 PrimaryCategoryAxis.Title 和 PrimaryValueAxis.Title 属性设置横纵坐标轴的轴标题。
7. 通过 SaveToFile() 方法保存文档，并用 Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中创建基础散点图：

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

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ScatterChartData.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);

    // 添加一个散点图，图表类型为带数据标记的散点图
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.ScatterMarkers });

    // 设置图表的数据区域
    chart.DataRange = sheet.Range.get("B2:B13");
    chart.SeriesDataFromRange = false;

    // 设置系列数据：A 列为 X 轴数据，B 列为 Y 轴数据
    chart.Series.get(0).CategoryLabels = sheet.Range.get("A2:A13");
    chart.Series.get(0).Values = sheet.Range.get("B2:B13");

    // 设置图表的位置
    chart.LeftColumn = 1;
    chart.TopRow = 15;
    chart.RightColumn = 10;
    chart.BottomRow = 32;

    // 设置图表标题
    chart.ChartTitle = "Scatter Chart";

    // 设置横纵坐标轴的轴标题
    chart.PrimaryCategoryAxis.Title = "Car Price";
    chart.PrimaryValueAxis.Title = "Salary";

    // 保存文档
    const outputFileName = 'CreateScatterChart_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName });

    // 释放资源
    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>Create Scatter Chart</h1>
      <button onClick={createScatterChart}>
        Start
      </button>
    </div>
  );
}

export default App;

创建基础散点图后的图表：

为散点图添加趋势线

趋势线在散点之上再画一条拟合曲线，用来概括数据的整体走向。数据点越分散，趋势线越能帮助读者判断变量之间是上升、下降还是接近持平。为散点图的数据系列添加一条指数趋势线，即可把这种趋势固定下来。

为散点图添加趋势线的写法与结果：

具体操作步骤如下：

1. 将字体文件与原始数据文件载入 VFS。
2. 创建 Workbook 对象，用 LoadFromFile() 载入 Excel 文档，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 通过 Worksheets.Charts.Add() 方法添加散点图，并设置 DataRange、CategoryLabels 与 Values。
4. 通过 ChartTitle 属性和坐标轴标题属性设置图表标题与横纵坐标轴的轴标题。
5. 使用 Series.get(0).TrendLines.Add() 方法为第一个数据系列添加指数趋势线。
6. 通过 SaveToFile() 方法保存文档，并用 Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中为散点图添加指数趋势线：

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
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ScatterChartData.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);

    // 添加一个散点图
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.ScatterMarkers });
    chart.DataRange = sheet.Range.get("B2:B13");
    chart.SeriesDataFromRange = false;
    chart.Series.get(0).CategoryLabels = sheet.Range.get("A2:A13");
    chart.Series.get(0).Values = sheet.Range.get("B2:B13");

    // 设置图表的位置
    chart.LeftColumn = 1;
    chart.TopRow = 15;
    chart.RightColumn = 10;
    chart.BottomRow = 32;

    // 设置图表标题
    chart.ChartTitle = "Scatter Chart with Trend Line";

    // 设置横纵坐标轴的轴标题
    chart.PrimaryCategoryAxis.Title = "Car Price";
    chart.PrimaryValueAxis.Title = "Salary";

    // 为第一个数据系列添加指数趋势线
    chart.Series.get(0).TrendLines.Add({ type: xlsModule.TrendLineType.Exponential });

    // 保存文档
    const outputFileName = 'ScatterChartTrendLine_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName });

    // 释放资源
    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>Add Trend Line to Scatter Chart</h1>
      <button onClick={addTrendLine}>
        Start
      </button>
    </div>
  );
}

export default App;

为散点图添加趋势线后的图表：

常见问题

数据点全部挤在坐标轴左下角

原因：设置的数据区域包含了表头行或空单元格，这些非数值内容会被视为零值或忽略，导致数据点全部聚集在坐标轴左下角。

解决：确认图表数据区域从数据行开始（例如 sheet.Range.get("A2:A13")），且 CategoryLabels 与 Values 指向相同的行范围，保证 X、Y 数据一一对应。

添加指数趋势线时失败

原因：指数趋势线要求数据全部为正数，当数据中包含 0 或负值时，无法完成指数回归拟合，趋势线可能添加失败或无法显示。

解决：检查数据中是否含有 0 或负值，必要时改用线性（Linear）、多项式（Polynomial）等适用于当前数据的趋势线类型。

散点图的横轴与纵轴数据如何对应

原因：散点图的横轴取 CategoryLabels，纵轴取 Values；如果两个区域的行数或起始行不一致，数据点就会错位，甚至落到坐标轴外。

解决：把 CategoryLabels 与 Values 指向相同的行范围，例如都用第 2 行到第 13 行，只改变列；这样每个横轴值都能找到对应的纵轴值。

获取免费许可证

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