当数据分成大类和小类两级，并且每个小类都带有一个数值时，表格中的多行记录很难一眼看出各分类所占的比重。树状图把层级关系放进相互嵌套的矩形，矩形面积对应数值大小，同一大类下的子类彼此相邻，适合观察分类构成与差距。把这类数据映射成树状图，再补上标签与填充色，图表就能直接用于报表和分享。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端创建并渲染树状图，输入输出文件通过虚拟文件系统（VFS）管理，无需后端服务支持。

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

• 创建树状图
• 设置树状图的标签与填充色

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

创建树状图

树状图以矩形面积表示数值，以矩形的分组关系表示层级。制作一张可用的树状图，需要先准备「大类、子类、数值」三列数据，再把图表类型指定为树状图，并将图表位置与标题确定下来。图表创建完成后保存为 Excel 工作簿，即可在表格软件中打开、继续编辑或分发。

创建树状图的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(0) 取得第一张工作表。
4. 用 sheet.Charts.Add() 添加图表，再把 chart.ChartType 设为 xlsModule.ExcelChartType.TreeMap。
5. 把 chart.DataRange 设为 sheet.Range.get("A2:C11")，其中前两列是分组与子类，第三列决定矩形面积。
6. 设置 chart.ChartTitle，并通过 chart.TopRow、chart.BottomRow、chart.LeftColumn、chart.RightColumn 确定图表位置与大小。
7. 调用 workbook.SaveToFile 写出 CreateTreeMap.xlsx，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何在 React 中创建树状图并保存到 Excel 工作簿：

function App() {
  const createTreeMap = 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 = 'TreeMapData.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();
    chart.ChartType = xlsModule.ExcelChartType.TreeMap;

    // 设置数据区域：前两列为分组与子类，第三列为数值
    chart.DataRange = sheet.Range.get('A2:C11');

    // 设置图表的位置与大小
    chart.TopRow = 1;
    chart.BottomRow = 20;
    chart.LeftColumn = 1;
    chart.RightColumn = 12;

    // 设置图表标题
    chart.ChartTitle = 'Area by cities';

    // 将带树状图的工作簿保存到 VFS
    const outputFileName = 'CreateTreeMap.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>在 React 中创建树状图</h1>
      <button id="create-treemap" onClick={createTreeMap}>创建树状图</button>
    </div>
  );
}

export default App;

创建树状图后的 Excel 工作簿：

设置树状图的标签与填充色

默认状态下，树状图不显示任何数据标签，只能借助图例分辨分组，难以判断每块面积对应的具体子类；同一分组下的矩形又共用一种颜色，相邻区域的边界也不够分明。为矩形开启名称标签，再按数据点顺序指定深浅不同的填充色，各项名称会直接落在对应的面积上，白色标签在深色底上清晰可读，分组结构与各块面积的大小也能同时看清。

设置树状图的标签与填充色的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与测试文件载入 VFS，再用 workbook.LoadFromFile 载入工作簿。
2. 调用 workbook.Worksheets.get(0) 取得工作表，用 sheet.Charts.Add() 添加图表并设为 xlsModule.ExcelChartType.TreeMap，再设置 chart.DataRange、标题与位置。
3. 用 chart.Series.get(0).DataPoints 取得数据点集合，按数据行数循环，把每个数据点的 DataFormat.Fill.FillType 设为 xlsModule.ShapeFillType.SolidColor，再用 ForeColor 指定颜色。
4. 把 chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels.HasCategoryName 设为 true。树状图的数据标签默认关闭，开启该项后类别名称才会显示在矩形上。
5. 把 chart.Series.get(0).DataFormat.TreeMapLabelOption 设为 xlsModule.ExcelTreeMapLabelOption.Overlapping，让子类名称直接叠加在矩形上；需要把分组名放进顶部条带时改用 Banner。
6. 用 workbook.SaveToFile 写出 TreeMapStyled.xlsx，再用 workbook.Dispose 释放资源并触发下载。

以下为完整的代码示例，演示如何设置树状图的标签与填充色：

function App() {
  const styleTreeMap = 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 = 'TreeMapData.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();
    chart.ChartType = xlsModule.ExcelChartType.TreeMap;
    chart.DataRange = sheet.Range.get('A2:C11');
    chart.TopRow = 1;
    chart.BottomRow = 20;
    chart.LeftColumn = 1;
    chart.RightColumn = 12;
    chart.ChartTitle = 'Area by cities';

    // 准备循环使用的填充色
    const colors = [
      xlsModule.Color.get_DarkGreen(),
      xlsModule.Color.get_DarkBlue(),
      xlsModule.Color.get_DarkGoldenrod(),
      xlsModule.Color.get_DarkRed(),
      xlsModule.Color.get_DarkSlateGray(),
    ];

    // 按数据点顺序为每个矩形设置填充色（数据共 10 行）
    const points = chart.Series.get(0).DataPoints;
    for (let i = 0; i < 10; i++) {
      points.get(i).DataFormat.Fill.FillType = xlsModule.ShapeFillType.SolidColor;
      points.get(i).DataFormat.Fill.ForeColor = colors[i % colors.length];
    }

    // 开启类别名称标签，并让项目名直接叠加在矩形上显示
    chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels.HasCategoryName = true;
    chart.Series.get(0).DataFormat.TreeMapLabelOption = xlsModule.ExcelTreeMapLabelOption.Overlapping;

    // 将带树状图的工作簿保存到 VFS
    const outputFileName = 'TreeMapStyled.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>在 React 中创建树状图</h1>
      <button id="style-treemap" onClick={styleTreeMap}>设置标签与填充色</button>
    </div>
  );
}

export default App;

设置树状图的标签与填充色后的 Excel 工作簿：

常见问题

树状图上的标签不显示

原因：树状图的数据标签默认处于关闭状态，矩形上不会出现任何名称；TreeMapLabelOption 只决定标签的排布方式，单独设置它不会让标签显示出来。

解决：先把数据点的 DataLabels.HasCategoryName 设为 true，再设置 TreeMapLabelOption，用 Overlapping 让子类名直接叠加在矩形上，或用 Banner 把分组名放入每组顶部的条带。例如：

chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels.HasCategoryName = true;
chart.Series.get(0).DataFormat.TreeMapLabelOption = xlsModule.ExcelTreeMapLabelOption.Overlapping;

树状图在工作表中的位置和大小如何调整

原因：图表的位置由 TopRow、BottomRow、LeftColumn、RightColumn 四个属性决定，它们分别对应图表覆盖的起始行、结束行、起始列与结束列。

解决：在保存工作簿之前调整这四个属性。数值越大，图表覆盖的行列范围越宽，在表格中的显示面积也越大。

树状图的数据应该怎样排列

原因：树状图按列读取层级与数值，列的顺序决定分组、子类与面积的对应关系。

解决：把数据整理成三列，第一列为大类，第二列为子类，第三列为数值，且数值列要保存为数字。设置 chart.DataRange 时从数据首行开始，例如 sheet.Range.get("A2:C11")，表头行不纳入区域。

获取免费许可证

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