当数据带有多个层级的分类结构时，摊平成普通表格后很难同时看清层级关系与各层的占比。旭日图把层级放进一组同心圆环，内环是上层分类，外环是下层分类，每个扇区的角度对应数值在所属分类中所占的比例，既能看出由哪些部分组成，也能一眼比较各层份额的大小。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.SunBurst。
5. 把 chart.DataRange 设为包含层级列与数值列的区域（示例为 sheet.Range.get("A1:D16")），最后一列决定扇区角度。
6. 设置 chart.ChartTitle，并通过 chart.TopRow、chart.BottomRow、chart.LeftColumn、chart.RightColumn 把图表放到数据区域右侧的第 6 至 15 列，确定其位置与大小，避免遮挡原有数据。
7. 调用 workbook.SaveToFile 写出 CreateSunburst.xlsx，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

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

function App() {
  const createSunburst = 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 = 'SunburstData.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.SunBurst;

    // 设置数据区域：前三列为区域、省份与城市，最后一列为销售额
    chart.DataRange = sheet.Range.get('A1:D16');

    // 设置图表的位置与大小
    chart.TopRow = 1;
    chart.BottomRow = 26;
    chart.LeftColumn = 6;
    chart.RightColumn = 15;

    // 设置图表标题
    chart.ChartTitle = '各区域销售额';

    // 将带旭日图的工作簿保存到 VFS
    const outputFileName = 'CreateSunburst.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-sunburst" onClick={createSunburst}>创建旭日图</button>
    </div>
  );
}

export default App;

创建旭日图后的 Excel 工作簿：

在旭日图的扇区上显示数据标签

默认创建的旭日图只有不同颜色的扇区，没有名称和数值，读者难以判断每个扇区代表哪个分类、数值是多少。为全部扇区开启类别名称与数值标签后，分类名称与对应数值会直接标在扇区上，从内环到外环的每一块都能逐块读出。

在旭日图的扇区上显示数据标签的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与测试文件载入 VFS，再用 workbook.LoadFromFile 载入工作簿。
2. 调用 workbook.Worksheets.get(0) 取得工作表，用 sheet.Charts.Add() 添加图表并设为 xlsModule.ExcelChartType.SunBurst，再设置 chart.DataRange、标题与位置。
3. 通过 chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels 取得标签对象，把 HasCategoryName 设为 true，每个扇区上随即显示分类名称。
4. 把同一标签对象的 HasValue 设为 true，名称旁同时显示该扇区对应的数值。
5. 用 workbook.SaveToFile 写出 SunburstLabels.xlsx，再用 workbook.Dispose 释放资源并触发下载。

以下为完整的代码示例，演示如何在旭日图的扇区上显示数据标签：

function App() {
  const styleSunburst = 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 = 'SunburstData.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.SunBurst;
    chart.DataRange = sheet.Range.get('A1:D16');
    chart.TopRow = 1;
    chart.BottomRow = 27;
    chart.LeftColumn = 5;
    chart.RightColumn = 15;
    chart.ChartTitle = '各区域销售额';

    // 开启类别名称与数值标签，让每个扇区同时显示名称和数值
    const labels = chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels;
    labels.HasCategoryName = true;
    labels.HasValue = true;

    // 将带旭日图的工作簿保存到 VFS
    const outputFileName = 'SunburstLabels.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-sunburst" onClick={styleSunburst}>显示数据标签</button>
    </div>
  );
}

export default App;

显示数据标签后的 Excel 工作簿：

常见问题

旭日图的数据应该怎样排列

原因：旭日图把数值列之前的各列按从内到外的顺序读作层级，最后一列作为数值，列的顺序直接决定圆环的嵌套关系。

解决：从第一列开始依次放置上层分类、中层分类与下层分类，最后一列放数值，并让 chart.DataRange 包含表头行，例如 sheet.Range.get("A1:D16")。层级列保存为文本，数值列保存为数字。

旭日图的图例如何隐藏

原因：图表默认显示图例，图例与圆环并排时会占去一部分绘图区域。

解决：在保存工作簿之前把 chart.HasLegend 设为 false，图例随即从图表中移除：

chart.HasLegend = false;

旭日图与树状图应如何选择

原因：两者都把多级分类映射到图形上，但呈现方式不同。旭日图用同心圆环表示层级，扇区角度对应占比；树状图用嵌套矩形表示层级，矩形面积对应数值。

解决：需要观察各层所占比例时选用旭日图，把 chart.ChartType 设为 xlsModule.ExcelChartType.SunBurst；需要比较各分类数值大小、强调面积差异时改用树状图，把 chart.ChartType 设为 xlsModule.ExcelChartType.TreeMap。

获取免费许可证

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