如何在ag-grid透视模式下的首列/末列添加迷你折线图？

核心思路 #

在透视模式下，通过自定义单元格渲染器实现迷你折线图，同时利用lockPosition属性固定自定义列的位置（首列/末列），确保透视列动态变化时自定义列位置不变。

步骤实现 #

1. 基础透视配置

先确保AG-Grid已开启透视模式，配置分组、透视维度和数值聚合列：

const gridOptions = {
    columnDefs: [
        // 透视行维度（分组列）
        { field: 'category', rowGroup: true, hide: true },
        // 透视列维度
        { field: 'month', pivot: true, hide: true },
        // 数值聚合列
        { field: 'value', aggFunc: 'sum', enableValue: true }
    ],
    pivotMode: true,
    enableSorting: true,
    enableFilter: true
};

2. 添加固定位置的自定义列

在columnDefs中新增自定义列，通过lockPosition指定固定位置：

• 首列：lockPosition: 'left'
• 末列：lockPosition: 'right'

同时绑定自定义单元格渲染器：

{
    field: 'trendChart',
    headerName: '趋势',
    lockPosition: 'left', // 固定到首列，替换为'right'可固定到末列
    width: 150,
    cellRenderer: miniLineChartRenderer
}

3. 实现迷你折线图渲染器

以Chart.js为例，编写自定义渲染器函数，从透视行的聚合数据中提取趋势数据并渲染折线图：

// 需提前引入Chart.js
function miniLineChartRenderer(params) {
    // 创建canvas容器
    const canvas = document.createElement('canvas');
    canvas.width = 140;
    canvas.height = 40;
    const ctx = canvas.getContext('2d');

    // 提取透视聚合后的数值与维度标签（需匹配实际生成的字段名）
    const rowData = params.node.data;
    const values = Object.keys(rowData)
        .filter(key => key.startsWith('value-'))
        .map(key => rowData[key]);
    const labels = Object.keys(rowData)
        .filter(key => key.startsWith('month-'))
        .map(key => key.split('-')[1]);

    // 渲染迷你折线图
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                data: values,
                borderColor: '#2196F3',
                backgroundColor: 'rgba(33, 150, 243, 0.1)',
                fill: true,
                pointRadius: 0,
                tension: 0.4
            }]
        },
        options: {
            responsive: false,
            maintainAspectRatio: false,
            plugins: { legend: { display: false }, tooltip: { enabled: true } },
            scales: {
                x: { display: false },
                y: { display: false }
            }
        }
    });

    return canvas;
}

4. 适配透视数据结构

透视模式下，AG-Grid会将聚合字段命名为[数值字段]-[透视维度值]（例如value-Jan），需根据实际字段命名规则调整数据提取逻辑。若使用自定义聚合函数，可通过params.node.aggData获取精准聚合结果。

关键注意事项 #

• lockPosition属性可确保自定义列不受透视列动态调整影响，固定在指定位置
• 折线图需适配单元格尺寸，隐藏坐标轴、图例等冗余元素，保持迷你样式
• 若使用ECharts等其他图表库，逻辑一致：在单元格内创建容器，初始化迷你图表并传入数据

内容的提问来源于stack exchange，提问作者King Tiger