如何让Ag-Grid的createRangeChart使用自定义排序后的sortedData

DevOps 小满

2026-6-24

解决ag-Grid图表使用自定义排序数据，同时保持表格无序的问题

问题说明

原始数据传入ag-Grid表格显示正常，但生成的图表中年龄数据排列杂乱。需要让图表使用按customerAge排序后的数据，同时表格保持原始无序状态。之前尝试通过chartThemeOverrides传入排序后的数据无效。

关键问题分析

Array.sort()是原地排序，会直接修改原数组，导致表格数据也被意外排序，所以排序前必须先拷贝原数组。
chartThemeOverrides仅用于覆盖图表的主题样式（如颜色、字体、布局），不能用来指定图表数据源，因此之前的配置完全无效。

解决方案

1. 修正排序逻辑，避免修改原数据

先对原数组进行浅拷贝，再执行排序，确保表格的原始数据不受影响：

const sortedData = computed(() => {
  // 使用slice()浅拷贝原数组，避免修改原data
  return data?.slice().sort(
    (a, b) => a.salesOrders.customerAge - b.salesOrders.customerAge,
  );
});

2. 在`createRangeChart`中直接传入自定义数据源

使用ag-Grid提供的chartData配置项，直接将排序后的数据传入图表，替代默认从表格范围获取数据的逻辑：

const onFirstDataRendered = () => {
  console.log("Starting chart...");

  gridApi.value.createRangeChart({
    chartContainer: document.querySelector(`#my_first_chart`),
    // 传入排序后的自定义数据源
    chartData: sortedData.value,
    // 指定图表需要使用的列（对应数据中的字段路径）
    cellRange: {
      columns: columnsToChart,
    },
    chartThemeName: "ag-material",
    suppressChartRanges: false,
    chartType: "column",
    aggFunc: "sum",
    unlinkChart: true,
    // 移除无效的chartThemeOverrides配置
  });
};