在 Excel 文件中添加图表是 Web 应用中常见的数据可视化需求。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成图表创建，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。它支持创建多种图表类型，包括柱状图、饼状图、环形图、折线图、散点图等。

Spire.XLS 组件为用户提供了多种图表类型选择，其中涵盖了 Excel 自带的各种图表。这些图表类型被定义在枚举 Spire.Xls.ExcelChartType 中，共有以下 81 种：

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

• 创建柱状图
• 创建饼状图
• 创建环形图

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

创建柱状图

柱状图是最常用的图表类型之一，用于比较不同类别之间的数据值。使用 Spire.XLS for JavaScript，您可以先在工作表中填充数据，然后添加图表对象，将图表类型设置为 ColumnClustered，并配置图表标题、坐标轴和数据标签来创建簇状柱形图。具体操作步骤如下：

1. 创建 Workbook 对象并获取默认工作表。
2. 在工作表中填入分类标签和数值数据。
3. 使用 sheet.Charts.Add() 添加图表。
4. 设置图表的 DataRange 数据区域，将图表类型指定为ExcelChartType.ColumnClustered。
5. 配置图表位置、标题、坐标轴标题和图例。
6. 使用 SaveToFile() 保存工作簿为 Excel 文件。

下面是一个完整的代码示例，展示了在 React 中创建簇状柱形图：

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

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

    // 创建新工作簿并获取默认工作表
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);
    sheet.Name = "ClusteredColumn";

    // 填入图表数据
    sheet.Range.get("A1").Value = "Country";
    sheet.Range.get("A2").Value = "Cuba";
    sheet.Range.get("A3").Value = "Mexico";
    sheet.Range.get("A4").Value = "France";
    sheet.Range.get("A5").Value = "German";

    sheet.Range.get("B1").Value = "Jun";
    sheet.Range.get("B2").NumberValue = 6000;
    sheet.Range.get("B3").NumberValue = 8000;
    sheet.Range.get("B4").NumberValue = 9000;
    sheet.Range.get("B5").NumberValue = 8500;

    sheet.Range.get("C1").Value = "Aug";
    sheet.Range.get("C2").NumberValue = 3000;
    sheet.Range.get("C3").NumberValue = 2000;
    sheet.Range.get("C4").NumberValue = 2300;
    sheet.Range.get("C5").NumberValue = 4200;

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

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

    // 设置图表类型为簇状柱形图
    chart.ChartType = xlsModule.ExcelChartType.ColumnClustered;

    // 配置图表标题
    chart.ChartTitle = "Sales market by country";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 配置坐标轴标题
    chart.PrimaryCategoryAxis.Title = "Country";
    chart.PrimaryCategoryAxis.Font.IsBold = true;
    chart.PrimaryCategoryAxis.TitleArea.IsBold = true;

    chart.PrimaryValueAxis.Title = "Sales(in Dollars)";
    chart.PrimaryValueAxis.HasMajorGridLines = false;
    chart.PrimaryValueAxis.MinValue = 1000;
    chart.PrimaryValueAxis.TitleArea.IsBold = true;
    chart.PrimaryValueAxis.TitleArea.TextRotationAngle = 90;

    // 配置数据标签：在每个数据点上显示数值
    for (let i = 0; i < chart.Series.Length; i++) {
      let cs = chart.Series.get(i);
      cs.Format.Options.IsVaryColor = true;
      cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
    }

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

    // 保存工作簿
    const outputFileName = 'ClusteredColumn.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>Create Clustered Column Chart</h1>
      <button onClick={createColumnChart}>
        Generate
      </button>
    </div>
  );
}

export default App;

使用 Spire.XLS for JavaScript 创建的簇状柱形图

创建饼状图

饼状图非常适合展示数据在各类别之间的比例分布。使用 Spire.XLS for JavaScript，您可以在添加图表时指定图表类型为 Pie，然后绑定分类标签和数据值来创建饼图。具体操作步骤如下：

1. 创建 Workbook 对象并获取默认工作表。
2. 在工作表中填入分类标签和数值数据。
3. 使用 sheet.Charts.Add() 添加类型为 ExcelChartType.Pie 的图表。
4. 设置图表数据区域并绑定分类标签和数值。
5. 配置图表位置、标题和数据标签。
6. 使用 SaveToFile() 保存工作簿为 Excel 文件。

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

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

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

    // 创建新工作簿并获取默认工作表
    const workbook = new xlsModule.Workbook();
    let sheet = workbook.Worksheets.get(0);
    sheet.Name = "Pie Chart";

    // 填入图表数据
    sheet.Range.get("A1").Value = "Year";
    sheet.Range.get("A2").Value = "2002";
    sheet.Range.get("A3").Value = "2003";
    sheet.Range.get("A4").Value = "2004";
    sheet.Range.get("A5").Value = "2005";

    sheet.Range.get("B1").Value = "Sales";
    sheet.Range.get("B2").NumberValue = 4000;
    sheet.Range.get("B3").NumberValue = 6000;
    sheet.Range.get("B4").NumberValue = 7000;
    sheet.Range.get("B5").NumberValue = 8500;

    // 添加饼图
    let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.Pie });
    chart.DataRange = sheet.Range.get("B2:B5");
    chart.SeriesDataFromRange = false;

    // 设置图表位置
    chart.LeftColumn = 1;
    chart.TopRow = 6;
    chart.RightColumn = 9;
    chart.BottomRow = 25;

    // 配置图表标题
    chart.ChartTitle = "Sales by year";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 绑定分类标签和数值
    let cs = chart.Series.get(0);
    cs.CategoryLabels = sheet.Range.get("A2:A5");
    cs.Values = sheet.Range.get("B2:B5");
    cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true; // 显示数值标签
    chart.PlotArea.Fill.Visible = false;

    // 保存工作簿
    const outputFileName = 'Pie.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>Create Pie Chart</h1>
      <button onClick={createPieChart}>
        Generate
      </button>
    </div>
  );
}

export default App;

使用 Spire.XLS for JavaScript 创建的饼状图

创建环形图

环形图与饼图类似，但中间为空心，可以显示多个数据系列。使用 Spire.XLS for JavaScript，您可以将图表类型设置为 Doughnut，并配置百分比数据标签来创建环形图。具体操作步骤如下：

1. 创建 Workbook 对象并获取默认工作表。
2. 在工作表中填入分类标签和数值数据。
3. 添加图表并将其 ChartType 设置为 ExcelChartType.Doughnut。
4. 配置图表位置、标题和百分比数据标签。
5. 使用 SaveToFile() 保存工作簿为 Excel 文件。

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

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

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

    // 创建新工作簿并获取默认工作表
    const workbook = new xlsModule.Workbook();
    let sheet = workbook.Worksheets.get(0);

    // 填入图表数据
    sheet.Range.get("A1").Value = "Country";
    sheet.Range.get("A1").Style.Font.IsBold = true;
    sheet.Range.get("A2").Value = "Cuba";
    sheet.Range.get("A3").Value = "Mexico";
    sheet.Range.get("A4").Value = "France";
    sheet.Range.get("A5").Value = "German";
    sheet.Range.get("B1").Value = "Sales";
    sheet.Range.get("B1").Style.Font.IsBold = true;
    sheet.Range.get("B2").NumberValue = 6000;
    sheet.Range.get("B3").NumberValue = 8000;
    sheet.Range.get("B4").NumberValue = 9000;
    sheet.Range.get("B5").NumberValue = 8500;

    // 添加环形图
    let chart = sheet.Charts.Add();
    chart.ChartType = xlsModule.ExcelChartType.Doughnut;
    chart.DataRange = sheet.Range.get("A1:B5");
    chart.SeriesDataFromRange = false;

    // 设置图表位置
    chart.LeftColumn = 4;
    chart.TopRow = 2;
    chart.RightColumn = 12;
    chart.BottomRow = 22;

    // 配置图表标题
    chart.ChartTitle = "Market share by country";
    chart.ChartTitleArea.IsBold = true;
    chart.ChartTitleArea.Size = 12;

    // 显示百分比数据标签
    for (let i = 0; i < chart.Series.Count; i++) {
      chart.Series.get(i).DataPoints.DefaultDataPoint.DataLabels.HasPercentage = true;
    }

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

    // 保存工作簿
    const outputFileName = 'CreateDoughnutChart.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>Create Doughnut Chart</h1>
      <button onClick={createDoughnutChart}>
        Generate
      </button>
    </div>
  );
}

export default App;

使用 Spire.XLS for JavaScript 创建的环形图

常见问题

饼图/环形图的标签如何显示数值或者百分比

解决：根据需求选择对应的标签属性：

// 显示数值标签
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
// 或显示百分比标签
cs.DataPoints.DefaultDataPoint.DataLabels.HasPercentage = true;

生成的 Excel 文件中图例显示不全或被截断

原因：图表区域过小，无法完整容纳所有图例项，或图例位置设置导致与图表数据区域重叠。

解决：增加图表的垂直范围，或调整图例位置：

// 增加图表高度
chart.BottomRow = 35;
// 或调整图例位置
chart.Legend.Position = xlsModule.LegendPositionType.Bottom;

获取免费许可证

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