在数据分析场景中，气泡图可以帮助我们从多维度直观地展示数据关系。气泡图的每个数据点由三个值定义：X 轴值、Y 轴值和气泡大小。Spire.XLS for JavaScript 提供了丰富的图表 API，支持在浏览器端通过 WebAssembly 直接创建气泡图，无需后端服务。

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

• 创建气泡图
• 设置气泡图样式

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

创建气泡图

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

1. 创建一个 Workbook 对象并获取第一个工作表。
2. 通过 Charts.Add(ExcelChartType.Bubble) 添加气泡图。
3. 设置 DataRange 属性指定图表数据区域。
4. 设置 SeriesDataFromRange = false 表示数据不从行列布局获取。
5. 设置 Series[0].Bubbles 指定气泡大小数据范围。
6. 设置图表标题、位置和尺寸。
7. 通过 Workbook.SaveToFile() 方法保存工作簿。

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

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

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

    // 将 Excel 文件载入 VFS
    const inputFileName = 'CreateBubbleChart.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.Bubble });

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

    // 设置气泡大小
    chart.Series.get(0).Bubbles = sheet.Range.get("C2:C5");

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

    // 设置图表标题
    chart.ChartTitle = "气泡图";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 保存工作簿
    const outputFileName = 'CreateBubbleChart.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={createBubbleChart}>Start</button>
    </div>
  );
}

export default App;

运行代码后，得到创建气泡图的效果：

设置气泡图样式

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

1. 获取已创建的气泡图对象。
2. 设置 ChartArea.Fill.ForeColor 属性设置图表背景色。
3. 设置 PlotArea.Fill.ForeColor 属性设置绘图区域背景色。
4. 设置 Series[0].Format.Fill.ForeColor 属性设置系列颜色。
5. 设置 Series[0].HasDataLabels 属性启用数据标签，并通过 DataPoints.DefaultDataPoint.DataLabels 指定标签内容。
6. 保存工作簿。

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

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

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

    // 将 Excel 文件载入 VFS
    const inputFileName = 'CreateBubbleChart.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.Bubble });

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

    // 设置气泡大小
    chart.Series.get(0).Bubbles = sheet.Range.get("C2:C5");

    // 设置图表位置
    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.Fill.FillType = xlsModule.ShapeFillType.SolidColor;
    chart.Series.get(0).Format.Fill.ForeColor = xlsModule.Color.get_Orange();
    // 启用并设置数据标签
    chart.Series.get(0).HasDataLabels = true;
    chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels.HasCategoryName = true;
    chart.Series.get(0).DataPoints.DefaultDataPoint.DataLabels.HasValue = true;

    // 保存工作簿
    const outputFileName = 'StyledBubbleChart.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={styleBubbleChart}>Start</button>
    </div>
  );
}

export default App;

运行代码后，得到设置气泡图样式的效果：

常见问题

DataRange 的 A、B、C 三列分别代表什么？

原因：气泡图的每个数据点需要 X 轴值、Y 轴值和气泡大小三个值，DataRange 指定的三列正是与之对应的。

解决：以 chart.DataRange = sheet.Range.get("A1:C5") 为例，A 列作为类别（X 轴），B 列作为 Y 轴值，C 列则通过 chart.Series.get(0).Bubbles = sheet.Range.get("C2:C5") 指定为气泡大小。三列的顺序不能互换，否则坐标位置和气泡大小都会错位。

为什么数据范围从 A1 开始，而不是 A2？

原因：数据区域的第一行会被用作系列名称。

解决：将表头行包含在 DataRange 中。示例中图例显示的"销售额"就来自单元格 B1，因此数据范围写作 A1:C5 而不是 A2:C5。

获取免费许可证

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