图表能让人一眼看出走势，却读不出具体的数值：柱子的高矮需要对照纵轴估算，系列一多，估算的误差还会叠加。数据表把类别名称、系列名称与各项数值原样列在图表下方，读者不必回头翻查源单元格，也不必在柱子上逐个加数据标签。作为图表的一部分，数据表随图表一起缩放、一起移动，导出图片或打印时也不会掉队。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 给 Excel 图表添加数据表
• 调整数据表的边框、图例项标示与文字格式

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

给 Excel 图表添加数据表

给图表添加数据表，解决的是「图与数分离」的问题。默认的柱形图只画出柱子的高低，数值留在源表格里，读者要在两处来回对照；系列较多时，数据表直接排在类别轴下方，每个系列占一行，各列对齐类别，柱子的颜色与行的顺序一一对应，趋势与数值在同一处呈现。示例工作簿中已备好一张季度销售表和一张柱形图，缺的只是图表下方的这张数据表。

打开数据表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与测试数据文件载入 VFS。
2. 用 new Workbook() 新建工作簿，用 workbook.LoadFromFile 载入输入文件，再用 workbook.Worksheets.get(0) 取得第一张工作表。
3. 用 sheet.Charts.get(0) 取得工作表中的第一张图表。
4. 把 chart.HasDataTable 设为 true，图表下方随即生成数据表。
5. 用 workbook.SaveToFile 保存工作簿，再用 workbook.Dispose 释放 workbook 对象以释放资源。

以下为完整的代码示例，演示如何在 React 中为 Excel 图表添加数据表：

function App() {
  const addDataTable = 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 = 'ChartSales.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.get(0);

    // 打开图表的数据表，类别名称与各系列数值会列在图表下方
    chart.HasDataTable = true;

    // 保存工作簿
    const outputFileName = 'AddDataTable.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>为 Excel 图表添加数据表</h1>
      <button id="add-data-table" onClick={addDataTable}>给图表添加数据表</button>
    </div>
  );
}

export default App;

给图表打开数据表后的销售报表：

调整数据表的边框、图例项标示与文字格式

调整数据表的边框、图例项标示与文字格式，是为了让这张表在系列较多时依然清爽，也能融入报表的版面。新打开的数据表四边带框，行与行、列与列之间都有分隔线，三行数值叠在一起，看上去像一张密不透风的网格；去掉外框和垂直分隔线，只留横线，视线便沿着行滑向数值，不会被竖线截断。把图例项标示打开，每个系列名称前又会出现与图例同色的色块，读者不必回头比对图例，也能知道这一行对应哪一种颜色。文字默认沿用图表中其他文字的设置，十磅、黑色、不加粗，夹在深色的柱子与网格线之间并不突出；压到九磅能在一行里排下更多数值，加粗并换成深一点的蓝色，又与标题、表头连成一套配色。这些设置只作用于数据表自身，图表标题、坐标轴与图例的文字保持原样。

边框、图例项标示与文字格式的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 载入字体与测试数据文件，再用 workbook.LoadFromFile 载入工作簿。
2. 用 workbook.Worksheets.get(0) 与 sheet.Charts.get(0) 取得第一张工作表与第一张图表。
3. 把 chart.HasDataTable 设为 true 打开数据表，再用 chart.DataTable 取得数据表对象。
4. 依次把 table.HasBorders 与 table.HasVertBorder 设为 false，把 table.HasHorzBorder 设为 true，只保留水平分隔线。
5. 把 table.ShowSeriesKeys 设为 true，在每个系列名称前显示图例项标示。
6. 依次设置 table.FontName、table.Size 与 table.IsBold，指定字体名称、字号与加粗。
7. 用 xlsModule.Color.FromArgb 构造深蓝色，并赋给 table.Color。
8. 用 workbook.SaveToFile 保存工作簿，再用 workbook.Dispose 释放 workbook 对象以释放资源。

以下为完整的代码示例，演示如何在 React 中调整数据表的边框、图例项标示与文字格式：

function App() {
  const customizeDataTable = 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 = 'ChartSales.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.get(0);

    // 打开数据表，并取得数据表对象
    chart.HasDataTable = true;
    const table = chart.DataTable;

    // 去掉外框与垂直分隔线，只保留行与行之间的横线
    table.HasBorders = false;
    table.HasVertBorder = false;
    table.HasHorzBorder = true;

    // 在每个系列名称前显示图例项标示
    table.ShowSeriesKeys = true;

    // 设置数据表的字体、字号、加粗与文字颜色
    table.FontName = '宋体';
    table.Size = 9;
    table.IsBold = true;
    table.Color = xlsModule.Color.FromArgb(255, 28, 68, 118);

    // 保存工作簿
    const outputFileName = 'DataTableFormatting.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>为 Excel 图表添加数据表</h1>
      <button id="data-table-formatting" onClick={customizeDataTable}>调整数据表的边框、图例项标示与文字格式</button>
    </div>
  );
}

export default App;

调整数据表的边框、图例项标示与文字格式后的数据表：

常见问题

数据表与数据标签有什么区别？

原因：数据标签标在每一个数据点旁边，只显示该点的数值；数据表列在图表下方，按系列整行排开，同时给出类别名称与全部数值。

解决：需要逐点标注、又不想让表格占地方时，用数据标签；需要读者一下子读到整组数值时，用数据表。两者可以同时存在，也可以在同一个图表上按需开关。

如何移除图表中的数据表？

原因：数据表由图表上的一个开关控制，打开之后并不会随源数据或图表类型自动消失。

解决：把 chart.HasDataTable 设为 false，再保存工作簿，图表下方的数据表随之移除。

如何让数据表的文字与图表其他部分使用不同的字体？

原因：数据表带有自己的文字格式，未设置时与图表中的其他文字保持一致；一旦设置，就只有数据表的文字改变。

解决：在 chart.DataTable 上设置 FontName、Size、IsBold 与 Color，这些属性只作用于数据表，图表标题、坐标轴与图例的文字不受影响。

数据表中的图例项标示是什么？

原因：图例项标示是系列名称前的小色块，颜色与图例中该系列的标记一致。它默认不显示，数据表里只有文字。

解决：把 table.ShowSeriesKeys 设为 true，每个系列名称前就会出现对应的色块，读者可以直接把数据表的一行与图例对起来。

获取免费许可证

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