如何在Ag Grid中实现RTL（从右到左）方向的条形迷你图

核心思路 #

利用Ag Grid Bar Sparkline的内置配置，直接设置条形绘制方向为RTL，同时绑定对比用的百分比字段，就能实现和LTR条形的左右对比效果。

具体实现步骤 #

• 1. 配置RTL列的Sparkline参数
  在列定义中新增一列，指定cellRenderer为agSparklineCellRenderer，并在cellRendererParams里设置sparklineOptions：

  {
    field: 'comparisonPercent', // 绑定对比用的百分比字段（0-100）
    headerName: 'RTL 进度对比',
    cellRenderer: 'agSparklineCellRenderer',
    cellRendererParams: {
      sparklineOptions: {
        type: 'bar',
        bar: {
          widthRatio: 0.8, // 控制条形宽度占单元格的比例
          direction: 'rtl', // 关键配置：设置条形从右往左绘制
          fill: '#ff9800' // 可选：设置不同颜色区分LTR条形
        },
        axis: {
          min: 0,
          max: 100 // 固定数值范围，保证对比一致性
        },
        tooltip: {
          enabled: true, // 开启 tooltip 显示具体百分比
          renderer: ({ value }) => `${value}%`
        }
      }
    }
  }
  

• 2. 搭配原有LTR列
  保留你现有的LTR进度条列配置，只需要确保绑定的是主数据的百分比字段，比如：

  {
    field: 'mainPercent',
    headerName: 'LTR 进度',
    cellRenderer: 'agSparklineCellRenderer',
    cellRendererParams: {
      sparklineOptions: {
        type: 'bar',
        bar: {
          widthRatio: 0.8,
          fill: '#2196f3'
        },
        axis: {
          min: 0,
          max: 100
        },
        tooltip: {
          enabled: true,
          renderer: ({ value }) => `${value}%`
        }
      }
    }
  }
  

• 3. 数据准备
  确保你的行数据包含两个百分比字段，比如：

  const rowData = [
    { category: '类别A', mainPercent: 75, comparisonPercent: 60 },
    { category: '类别B', mainPercent: 40, comparisonPercent: 85 },
    // ... 更多数据
  ];
  

注意事项 #

• 如果遇到direction: 'rtl'不生效的情况，可以尝试反转坐标轴的min和max（设置min:100, max:0），同样能实现从右往左填充的效果。
• 调整widthRatio可以让两个条形在单元格里更紧凑，避免重叠。
• 通过设置不同的fill颜色，能更直观地区分两组对比数据。

内容的提问来源于stack exchange，提问作者jithu reddy