Angular中AG Grid集成图表显示空白问题求助

我按照AG Grid官方教程给数据网格添加了集成图表，但图表只显示坐标轴，没有内容（截图：）。数据是从服务器获取后渲染到网格的，网格定义如下：

<ag-grid-angular #agGrid id="myGrid" class="ag-theme-alpine" [popupParent]="popupParent" [rowModelType]="rowModelType" [suppressServerSideInfiniteScroll]="suppressServerSideInfiniteScroll" [pagination]="true" [getServerSideGroupLevelParams]="getServerSideStoreParams" [rowGroupPanelShow]="rowGroupPanelShow" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef" [columnTypes]="columnTypes" [rowData]="rowData" (gridReady)="onGridReady($event)" [rowSelection]="rowSelection" [enableRangeSelection]="enableRangeSelection" [enableCharts]="enableCharts" > </ag-grid-angular>

我尝试在列定义中指定chartDataType，但问题依然存在，列配置代码如下：

constructor(private http: HttpClient, private dialog: MatDialog) {
this.rowData = [];
this.defaultColDef = {flex: 1, sortable: true, enableRowGroup: true};
this.columnTypes = {
  numberColumn: {
    editable: true,
    chartDataType: 'series',
    filter: "agNumberColumnFilter",
    valueParser: this.numberValueParser,
    filterParams: {
      buttons: ['apply', 'reset'],
      closeOnApply: true,
      suppressAndOrCondition: true,
      filterOptions: ['equals', 'lessThan', 'greaterThan']
    }
  },
  setFilterColumn: {
    filter: 'agSetColumnFilter',
    filterParams: {
      buttons: ['apply', 'reset'],
      closeOnApply: true,
      refreshValuesOnOpen: true,
      values: this.getSetFilterValues.bind(this)
    }
  },
  textFilterColumn: {
    filter: 'agTextColumnFilter',
    filterParams: {
      buttons: ['apply', 'reset'],
      closeOnApply: true,
      suppressAndOrCondition: true,
      filterOptions: ['contains']
    },
  }
};

this.columnDefs = [
  {
    field: 'entity',
    type: 'textFilterColumn',
    chartDataType: 'category',
  },
  {
    field: 'item',
    type: 'textFilterColumn',
    chartDataType: 'category',
    flex: 2
  },
  {
    field: 'customer',
    chartDataType: 'category',
    type: 'textFilterColumn'
  },
  {
    field: 'tx_number',
    flex: 1.5,
    chartDataType: 'category',
    // type: 'textFilterColumn',
  },
  {
    field: 'jan_2022',
    flex: 2,
    type: 'numberColumn',
    chartDataType: 'series',
    aggFunc:'Sum',
    headerName: 'jan_2022',
  },
]

排查与解决方法 #

1. 校验数值列的数据类型
   确保后端返回的jan_2022是数值类型，而非字符串。如果是字符串，图表无法识别为系列数据，可在获取数据后做类型转换：

   this.http.get('/your-api-path').subscribe(rawData => {
     this.rowData = rawData.map(item => ({
       ...item,
       jan_2022: Number(item.jan_2022)
     }));
   });
   

2. 配置服务端行模型的图表支持
   你使用的是服务端行模型，需确保服务端存储允许图表聚合：

   • 在getServerSideStoreParams中开启图表支持：

     getServerSideStoreParams = () => {
       return { enableCharts: true };
     };
     

   • 确认后端接口能处理Sum聚合请求，返回正确的聚合结果。

3. 检查图表创建的数据源选择

   • 手动创建图表时，需明确指定有效的分类列和系列列，且选中包含数据的行范围；
   • 右键菜单创建时，确保选择的列组合合理（比如一个分类列+一个数值系列列）。

4. 避免chartDataType配置冲突
   列定义中直接设置的chartDataType优先级高于columnTypes，可尝试移除columnTypes中的chartDataType配置，仅在列定义中明确指定，消除潜在冲突。

内容的提问来源于stack exchange，提问作者Aprameya Bharadwaj