AG-Grid透视表能否对同一字段同时实现多类聚合运算?
AG-Grid透视表同时展示同一字段多聚合值的正规实现
针对你遇到的AG-Grid透视表无法重复添加同一字段到Values区域的问题,无需复制列定义的正规实现方式如下:
核心方案:利用valueColumns配置多聚合项
AG-Grid允许通过valueColumns直接为同一个数据源字段配置多个不同的聚合规则,无需重复定义列。具体步骤:
- 定义基础列结构:保留原始的分组列和CPU数据列(可隐藏原始列避免干扰)
- 配置多聚合值列:在
valueColumns数组中,为cpuLoad字段创建两个配置项,分别指定聚合函数和显示名称
代码示例
// 基础列定义:仅保留分组字段和原始CPU数据字段 const columnDefs = [ { field: 'year', rowGroup: true }, { field: 'month', rowGroup: true }, { field: 'machineName', rowGroup: true }, { field: 'cpuLoad', hide: true } // 隐藏原始字段,仅用于聚合计算 ]; // 配置多聚合规则的数值列 const pivotValueColumns = [ { field: 'cpuLoad', displayName: 'CPU月度平均值', aggFunc: 'avg' // 内置平均值聚合函数 }, { field: 'cpuLoad', displayName: 'CPU月度最大值', aggFunc: 'max' // 内置最大值聚合函数 } ]; // Grid配置 const gridOptions = { columnDefs: columnDefs, pivotMode: true, valueColumns: pivotValueColumns, // 其他必要配置(如行高、主题等) };
效果说明
配置完成后,透视表会自动生成两个独立的计算列,分别展示每个分组(年/月/机器)下的CPU负载月度平均值和最大值,完全匹配你需要的效果。这种方式复用了原始字段定义,避免了冗余的列配置,是AG-Grid官方支持的标准实现方案。
内容的提问来源于stack exchange,提问作者fpscolin
相关产品推荐
相关产品推荐

