数据透视图是以图形方式直观展示数据透视表汇总结果的图表，它让数据比较与趋势一目了然，是进行数据分析与报表展示的重要工具。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成对 Excel 数据透视图的创建、字段按钮控制与系列格式设置，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。它提供了完整的 API 用于创建基于数据透视表的数据透视图、控制数据透视图字段按钮的显示与隐藏，以及自定义数据透视图系列的外观格式。

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

• 在 Excel 中创建数据透视图
• 显示或隐藏 Excel 数据透视图的字段按钮
• 给 Excel 数据透视图系列设置格式

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

在 Excel 中创建数据透视图

数据透视图必须基于数据透视表来创建。Spire.XLS for JavaScript 支持在工作表中先创建数据透视表，再通过 Charts.Add() 方法指定 pivotChartType 和 pivotTable 参数，基于该数据透视表直接生成对应的数据透视图。具体操作步骤如下：

1. 创建 Workbook 对象并获取默认工作表。
2. 在工作表中填入数据透视表所需的源数据。
3. 使用 PivotCaches.Add() 创建数据透视表缓存。
4. 使用 PivotTables.Add() 添加数据透视表，并将字段拖至行区域和数据区域。
5. 使用 sheet.Charts.Add() 添加图表，并通过 pivotChartType 和 pivotTable 参数基于数据透视表创建数据透视图。
6. 设置数据透视图的位置和标题。
7. 使用 SaveToFile() 保存工作簿为 Excel 文件。

下面是一个完整的代码示例，展示了在 React 中基于数据透视表创建数据透视图：

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

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

    // 将中文字体加载到虚拟文件系统（VFS）
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

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

    // 填入数据透视表的源数据
    sheet.Range.get('A1').Value = '产品';
    sheet.Range.get('B1').Value = '月份';
    sheet.Range.get('C1').Value = '销量';

    sheet.Range.get('A2').Value = '苹果';
    sheet.Range.get('A3').Value = '苹果';
    sheet.Range.get('A4').Value = '香蕉';
    sheet.Range.get('A5').Value = '苹果';
    sheet.Range.get('A6').Value = '香蕉';
    sheet.Range.get('A7').Value = '香蕉';

    sheet.Range.get('B2').Value = '一月';
    sheet.Range.get('B3').Value = '二月';
    sheet.Range.get('B4').Value = '一月';
    sheet.Range.get('B5').Value = '一月';
    sheet.Range.get('B6').Value = '二月';
    sheet.Range.get('B7').Value = '二月';

    sheet.Range.get('C2').Value = '10';
    sheet.Range.get('C3').Value = '15';
    sheet.Range.get('C4').Value = '9';
    sheet.Range.get('C5').Value = '7';
    sheet.Range.get('C6').Value = '8';
    sheet.Range.get('C7').Value = '10';

    // 创建数据透视表
    let dataRange = sheet.Range.get('A1:C7');
    let cache = workbook.PivotCaches.Add({ range: dataRange });
    let pivotTable = sheet.PivotTables.Add('数据透视表', sheet.Range.get({ row: 1, column: 5 }), cache);

    // 将字段拖到行区域
    let pf = pivotTable.PivotFields.get_Item('产品');
    pf.Axis = xlsModule.AxisTypes.Row;
    let pf2 = pivotTable.PivotFields.get_Item('月份');
    pf2.Axis = xlsModule.AxisTypes.Row;

    // 将字段拖到数据区域
    pivotTable.DataFields.Add(pivotTable.PivotFields.get_Item('销量'), '求和项:销量', xlsModule.SubtotalTypes.Sum);

    // 设置数据透视表样式并计算结果
    pivotTable.BuiltInStyle = xlsModule.PivotBuiltInStyles.PivotStyleMedium12;
    pivotTable.CalculateData();

    // 基于数据透视表创建簇状柱形图
    let chart = sheet.Charts.Add({ pivotChartType: xlsModule.ExcelChartType.ColumnClustered, pivotTable: pivotTable });
    // 设置数据透视图位置
    chart.TopRow = 9;
    chart.LeftColumn = 1;
    chart.RightColumn = 9;
    chart.BottomRow = 25;
    // 设置数据透视图标题
    chart.ChartTitle = "数据透视图";

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

export default App;

使用 Spire.XLS for JavaScript 在 Excel 中创建数据透视图后的效果

显示或隐藏 Excel 数据透视图的字段按钮

默认情况下，数据透视图会显示字段按钮，方便用户交互式地筛选和切换字段数据。在生成报表时，您可能希望隐藏部分或全部字段按钮，使图表更加简洁。Spire.XLS for JavaScript 提供了 DisplayEntireFieldButtons、DisplayValueFieldButtons、DisplayAxisFieldButtons、DisplayLegendFieldButtons 和 ShowReportFilterFieldButtons 等属性，用于灵活控制各类型字段按钮的显示与隐藏。具体操作步骤如下：

1. 创建 Workbook 对象并加载包含数据透视图的已有 Excel 文件。
2. 通过 workbook.Worksheets.get() 获取工作表。
3. 使用 sheet.Charts.get() 获取数据透视图对象。
4. 通过 DisplayEntireFieldButtons 控制是否显示全部字段按钮。
5. 通过 DisplayValueFieldButtons、DisplayAxisFieldButtons、DisplayLegendFieldButtons 和 ShowReportFilterFieldButtons 分别控制各类型字段按钮的显示与隐藏。
6. 使用 SaveToFile() 保存工作簿为 Excel 文件。

下面是一个完整的代码示例，展示了在 React 中显示或隐藏数据透视图的字段按钮（示例加载上一节生成的数据透视图文件 PivotChart.xlsx）：

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

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

    // 将包含数据透视图的示例文件加载到虚拟文件系统（VFS）
    let excelFileName = 'PivotChart.xlsx';
    await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 创建新工作簿并加载已有文件
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: excelFileName });

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

    // 获取数据透视图
    let chart = sheet.Charts.get(0);

    // 控制全部字段按钮的显示
    chart.DisplayEntireFieldButtons = true;

    // 隐藏数值字段按钮
    chart.DisplayValueFieldButtons = false;
    // 隐藏坐标轴字段按钮
    chart.DisplayAxisFieldButtons = false;
    // 隐藏图例字段按钮
    //chart.DisplayLegendFieldButtons = false;
    // 显示报表筛选字段按钮
    //chart.ShowReportFilterFieldButtons = true;

    // 保存工作簿
    const outputFileName = 'PivotChartFieldButtons.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>Show/Hide PivotChart Field Buttons</h1>
      <button onClick={showHideFieldButtons}>
        Generate
      </button>
    </div>
  );
}

export default App;

使用 Spire.XLS for JavaScript 显示或隐藏数据透视图字段按钮后的效果

给 Excel 数据透视图系列设置格式

对数据透视图的系列进行格式化，可以让图表更加美观、层次分明，从而更清晰地传达数据信息。Spire.XLS for JavaScript 支持加载包含数据透视图的 Excel 文件，通过 Charts.get() 方法获取数据透视图，再通过系列的 DataFormat 属性设置填充类型、颜色与边框样式，并通过 GetCommonSerieFormat() 方法返回的格式对象设置数据条宽度等格式。具体操作步骤如下：

1. 创建 Workbook 对象。
2. 使用 LoadFromFile() 方法加载包含数据透视图的 Excel 文件。
3. 使用 Worksheets.get() 方法获取 Excel 文件中的特定工作表。
4. 使用 Charts.get() 方法获取工作表中的数据透视图。
5. 设置数据透视图的位置和标题。
6. 使用 Series.get() 方法获取数据透视图的数据系列。
7. 通过 DataFormat 属性设置系列的填充类型、颜色与边框样式，并通过 GetCommonSerieFormat() 方法设置数据条宽度等格式。
8. 使用 SaveToFile() 方法保存生成的文件。

下面是一个完整的代码示例，展示了在 React 中给数据透视图的系列设置格式（示例加载上一节生成的数据透视图文件 PivotChart.xlsx）：

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

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

    // 将包含数据透视表的示例文件加载到虚拟文件系统（VFS）
    let excelFileName = 'PivotChart.xlsx';
    await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 创建 Workbook 对象
    const workbook = new xlsModule.Workbook();
    // 加载 Excel 文件
    workbook.LoadFromFile({ fileName: excelFileName });

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

    //获取数据透视图
    let chart = sheet.Charts.get(0);

    // 设置数据透视图位置
    chart.TopRow = 1;
    chart.LeftColumn = 8;
    chart.RightColumn = 18;
    chart.BottomRow = 15;

    // 设置图表标题
    chart.ChartTitle = "";

    // 向数据透视图添加系列
    let series = chart.Series.get(0);

    // 设置数据条的宽度
    series.GetCommonSerieFormat().GapWidth = 10;
    // series.GetCommonSerieFormat().Overlap = 100;

    // 设置系列的填充类型与前景色、背景色
    series.DataFormat.Fill.FillType = xlsModule.ShapeFillType.SolidColor;
    series.DataFormat.ForeGroundColor = xlsModule.Color.get_Red();
    series.DataFormat.BackGroundColor = xlsModule.Color.get_White();

    // 设置系列边框的颜色、线型与线宽
    series.DataFormat.LineProperties.Pattern = xlsModule.ChartLinePatternType.Solid;
    series.DataFormat.LineProperties.Color = xlsModule.Color.get_Blue();
    series.DataFormat.LineProperties.CustomLineWeight = 2.5;

    // 为系列添加阴影效果
    series.DataFormat.IsShadow = true;

    // 保存工作簿
    const outputFileName = 'PivotChartSeriesFormat.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>Format PivotChart Series</h1>
      <button onClick={formatPivotChartSeries}>
        Generate
      </button>
    </div>
  );
}

export default App;

使用 Spire.XLS for JavaScript 设置数据透视图系列格式后的效果

常见问题

如何刷新数据透视图以显示最新数据？

原因：数据透视图基于数据透视表创建，修改数据透视表的数据源后，图表不会自动同步更新。

解决：在修改数据源后，通过 Cache.IsRefreshOnLoad 属性让数据透视表在文件打开时自动刷新，从而同步更新数据透视图：

// 获取数据透视表
let pivotTable = sheet.PivotTables.get(0);
// 设置在文件打开时自动刷新数据透视表
pivotTable.Cache.IsRefreshOnLoad = true;

为什么数据透视图没有显示任何数据？

原因：数据透视图的系列来源于数据透视表的汇总结果，如果数据透视表未执行计算，或创建数据透视图时未正确关联数据透视表，图表可能会显示为空白。

解决：创建数据透视表后调用 CalculateData() 方法计算结果，并在创建数据透视图时通过 pivotTable 参数正确关联数据透视表：

// 计算数据透视表的结果
pivotTable.CalculateData();

// 基于数据透视表创建数据透视图
let chart = sheet.Charts.Add({ pivotChartType: xlsModule.ExcelChartType.ColumnClustered, pivotTable: pivotTable });

获取免费许可证

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