如何在Ag Grid中隐藏列同时用其数据创建交叉过滤图表？

云上老周

2026-7-26

解决Ag Grid隐藏列后交叉过滤图表消失的问题

有两种可行方案实现隐藏网格列同时用该列数据生成交叉过滤图表：

方案一：启用图表包含隐藏列配置
在调用createCrossFilterChart创建图表时，添加chartIncludeHiddenColumns: true参数。这个配置会让Ag Grid忽略列的隐藏状态，将该列数据纳入图表数据源中。示例代码如下：
```
gridApi.createCrossFilterChart({
  chartType: 'bar',
  chartThemeName: 'ag-default',
  cellRange: {
    columns: ['category', 'sales'] // 即使sales列设置了hide:true也能被引用
  },
  chartIncludeHiddenColumns: true,
  crossFilter: {
    enabled: true
  }
});
```
同时确保目标列（比如sales）的chartDataType设置正确（例如'number'），保证图表能正确识别数据类型。
方案二：视觉隐藏列而非真正隐藏
如果不想修改图表配置，可以把目标列设置为视觉上不可见，但不使用hide: true。具体可以设置列的width: 0，同时加上suppressSizeToFit: true和suppressMenu: true，避免用户通过菜单调整列宽。示例列定义：
```
{
  field: 'sales',
  width: 0,
  suppressSizeToFit: true,
  suppressMenu: true,
  chartDataType: 'number'
}
```
这种方式下，列在网格中完全看不到，但数据仍会被网格加载，图表可以正常使用该列数据做交叉过滤。