ag-grid集成交叉过滤图表出现额外未定义列及多余Group列如何解决？

实现方案 #

修改核心逻辑如下：

• 关闭ag-grid自动生成行分组列的特性，用自定义的make列作为分组展示列，避免出现多余的Group列
• 跨过滤图表新增suppressGrandTotal配置，直接隐藏不需要的总合计列
• 保留原生交叉过滤特性，不需要使用透视图即可满足需求

完整修改后代码如下：

JavaScript代码

const agGrid = window.agGrid;
const gridContainer = document.querySelector('#gridContainer');
const chartContainer = document.querySelector('#chartContainer');

const columnDefs = [
  { field: 'model' },
  { field: 'price', type: 'number', chartDataType: 'series' },
  { 
    field: 'make', 
    rowGroup: true,
    cellRenderer: 'agGroupCellRenderer',
    chartDataType: 'category', 
    filter: 'agMultiColumnFilter', 
    showRowGroup: true
  }
];
const rowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Toyota', model: 'Yaris', price: 26000 },
  { make: 'Toyota', model: 'Corolla', price: 3700 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Ford', model: 'Focus', price: 28000 },
  { make: 'Ford', model: 'Fiesta', price: 25000 },
  { make: 'Honda', model: 'Civic', price: 26000 },
  { make: 'Honda', model: 'CRV', price: 72000 },
  { make: 'Honda', model: 'Acord', price: 32000 }
];
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  groupSelectsChildren: true,
  suppressAggFuncInHeader: true,
  rowSelection: 'multiple',
  suppressRowGroupColumns: true, // 禁止生成额外的Group列
  columnTypes: {
    number: {
      aggFunc: 'sum'
    }
  },
  onFirstDataRendered: ({ api }) => {
    api.createCrossFilterChart({
      cellRange: { columns: ['make', 'price'] },
      chartType: 'column',
      aggFunc: 'sum',
      chartContainer: chartContainer,
      suppressGrandTotal: true // 隐藏图表总合计列
    });
  }
};

document.addEventListener('DOMContentLoaded', () => {
  new agGrid.Grid(gridContainer, gridOptions);
});

CSS代码

@import url('https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css');
@import url('https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css');

HTML代码

<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
<div id="gridContainer" style="height: 400px; width: 820px;" class="ag-theme-alpine"></div>
<div id="chartContainer" style="height: 400px; width: 820px;" class="ag-theme-alpine"></div>

内容的提问来源于stack exchange，提问作者Krzysztof Kaczyński