如何在AG Grid集成图表中把表头视为时间序列并按行生成独立序列

核心思路 #

AG Grid 默认按列（纵向）生成图表，要实现每行作为独立时间序列，需调整数据维度映射，把行分类设为系列、时间列设为类别，再通过参数强制交换轴映射。

具体配置步骤 #

• 定义列的图表数据类型
  第一列（分类列）设为系列维度，所有时间列设为类别维度：

  const columnDefs = [
    { field: 'category', chartDataType: 'series', headerName: '分类' },
    { field: '2024-01', chartDataType: 'category' },
    { field: '2024-02', chartDataType: 'category' },
    // 其他时间列依此类推
  ];
  

• 调用图表API时配置关键参数
  添加swapXY: true交换轴映射，确保每行转为独立折线：

  gridApi.createRangeChart({
    chartType: 'line',
    cellRange: {
      rowStartIndex: 0,
      rowEndIndex: gridApi.getDisplayedRowCount(),
      columnStartIndex: 0,
      columnEndIndex: columnDefs.length - 1
    },
    chartThemeName: 'ag-default',
    swapXY: true, // 核心参数：交换X/Y轴数据映射
    axes: {
      bottom: {
        type: 'category',
        label: { rotation: 45 } // 时间标签旋转避免重叠
      },
      left: {
        type: 'number'
      }
    }
  });
  

问题排查 #

如果图表仍不符合预期，检查：

• 所有时间列是否都设置了chartDataType: 'category'
• cellRange是否覆盖了所有目标行和列
• 可通过AG Grid图表UI面板手动切换“系列”与“类别”维度，验证数据映射逻辑

内容的提问来源于stack exchange，提问作者Sorta Gud