当需要同时对比多个维度的指标时，雷达图（Radar Chart）是一种非常直观的呈现方式——它把每个维度放在一条从中心向外辐射的轴上，用折线把各轴上的数值连成多边形，形状的"胖瘦"一眼就能看出强弱项。Spire.XLS for JavaScript 提供了完整的图表 API，支持在浏览器端通过 WebAssembly 直接创建雷达图，无需后端服务。

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

• 创建雷达图
• 设置雷达图样式

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

创建雷达图

通过 sheet.Charts.Add() 方法可以为工作表添加雷达图。具体操作步骤如下：

1. 加载包含数据的 Excel 文件，并获取第一个工作表。
2. 通过 Charts.Add({ chartType: ExcelChartType.Radar }) 添加雷达图。
3. 设置 DataRange 属性指定图表数据区域：首行为系列名称，首列为各条轴上的分类名称，其余单元格为数值。
4. 设置 SeriesDataFromRange = false 表示数据不从行列布局获取。
5. 设置图表标题、位置和图例位置。
6. 通过 Workbook.SaveToFile() 方法保存工作簿。

下面是一个完整的代码示例，展示了在 React 中创建雷达图：

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

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

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

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

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

    // 添加雷达图
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.Radar });

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

    // 设置图表位置
    chart.LeftColumn = 7;
    chart.TopRow = 6;
    chart.RightColumn = 16;
    chart.BottomRow = 29;

    // 设置图表标题
    chart.ChartTitle = "各地区的产品销售情况";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 设置图例位置
    chart.Legend.Position = xlsModule.LegendPositionType.Corner;

    // 保存工作簿
    const outputFileName = 'CreateRadarChart.xlsx';
    workbook.SaveToFile(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>创建雷达图</h1>
      <button onClick={createRadarChart}>Start</button>
    </div>
  );
}

export default App;

运行后，创建雷达图的效果：

设置雷达图样式

在创建雷达图后，可以通过设置图表区域、绘图区域和系列线条颜色等属性，进一步美化雷达图的外观。具体操作步骤如下：

1. 获取已创建的雷达图对象。
2. 设置 ChartArea.Fill.ForeColor 属性设置图表背景色。
3. 设置 PlotArea.Fill.ForeColor 属性设置绘图区域背景色。
4. 设置 Series[i].Format.LineProperties.Color 属性指定每个系列的线条颜色，Series.get(0) 与 Series.get(1) 分别对应数据区域中的两个系列。
5. 保存工作簿。

下面是一个完整的代码示例，展示了如何设置雷达图样式：

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

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

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

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

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

    // 添加雷达图
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.Radar });

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

    // 设置图表位置
    chart.LeftColumn = 7;
    chart.TopRow = 6;
    chart.RightColumn = 16;
    chart.BottomRow = 29;

    // 设置图表标题
    chart.ChartTitle = "各地区的产品销售情况";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 设置雷达图样式
    // 设置图表区域背景色
    chart.ChartArea.Fill.ForeColor = xlsModule.Color.get_LightCyan();
    // 设置绘图区域背景色
    chart.PlotArea.Fill.ForeColor = xlsModule.Color.get_LightYellow();
    // 设置第一个系列的线条颜色
    chart.Series.get(0).Format.LineProperties.Color = xlsModule.Color.get_Orange();
    // 设置第二个系列的线条颜色
    chart.Series.get(1).Format.LineProperties.Color = xlsModule.Color.get_CornflowerBlue();

    // 保存工作簿
    const outputFileName = 'StyledRadarChart.xlsx';
    workbook.SaveToFile(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>设置雷达图样式</h1>
      <button onClick={styleRadarChart}>Start</button>
    </div>
  );
}

export default App;

运行后，设置雷达图样式的效果：

常见问题

设置系列颜色后雷达图没有变化

原因：雷达图的系列以线条形式绘制，用 Series.get(i).Format.Fill 设置填充色不会生效。

解决：通过 Series.get(i).Format.LineProperties.Color 设置线条颜色，例如：

chart.Series.get(0).Format.LineProperties.Color = xlsModule.Color.get_Orange();

如何调整雷达图的图例位置？

原因：图例默认停靠在图表右侧，会与绘图区域争夺宽度，在雷达图这种横向占位较大的图表上尤其明显。

解决：通过 chart.Legend.Position 属性设置图例位置，可取 LegendPositionType.Bottom、Corner、Top、Right、Left、NotDocked。例如把图例移到右上角：

chart.Legend.Position = xlsModule.LegendPositionType.Corner;

获取免费许可证

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