如何使用recharts绘制双轴均为字符串类型的BarChart柱状图

Recharts 的 Bar 组件柱高计算必须依赖数值型字段，原生双分类轴场景不需要修改源码，通过数值映射+自定义刻度的方式即可实现，具体实现步骤如下：

核心实现逻辑 #

先将有序的y轴字符串分类映射为对应数值，作为柱高计算的依据；再通过坐标轴自定义刻度方法，将数值刻度换回原始字符串展示，即可实现两个轴都显示字符串、柱高和y值匹配的效果。

具体操作步骤 #

• 第一步：定义y轴分类的顺序与映射规则
  你的y值是有序等级类分类，先按从低到高的顺序定义分类列表，给每个等级分配对应的数值权重：

  // 按等级从低到高排列，数组索引作为数值映射的基准
  const Y_LEVELS = ['low', 'medium', 'high', 'very high']
  // 生成 字符串->数值 的映射表
  const yValueMap = Object.fromEntries(
    Y_LEVELS.map((level, index) => [level, index + 1])
  )
  

• 第二步：处理原始数据，新增数值型柱高字段
  遍历原始数据，给每条数据新增一个数值字段，作为Bar组件实际绑定的柱高依据：

  const rawData = [
    {y: 'medium', x:'P'},
    {y: 'high', x:'Y'},
    {y: 'low', x:'SS'},
    {y: 'medium', x:'DD'},
    {y: 'very high', x:'NN'},
  ]
  // 转换后的数据供图表使用
  const chartData = rawData.map(item => ({
    ...item,
    barHeight: yValueMap[item.y]
  }))
  

• 第三步：配置图表组件，自定义坐标轴刻度
  X轴直接使用原始x字段作为分类轴；Y轴配置为数值轴，通过格式化函数将数值转换回原始等级字符串，同时指定固定刻度避免多余数值显示：

  import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
  
  export default function StringAxisBar() {
    return (
      <BarChart 
        width={600} 
        height={400} 
        data={chartData}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        {/* X轴直接绑定原始字符串字段，作为分类轴 */}
        <XAxis dataKey="x" type="category" />
        {/* Y轴使用数值类型，自定义刻度显示为对应等级字符串 */}
        <YAxis 
          type="number"
          domain={[0, Y_LEVELS.length]}
          // 强制只显示4个等级对应的刻度
          ticks={Y_LEVELS.map((_, idx) => idx + 1)}
          // 将数值刻度转换回原始字符串
          tickFormatter={(value) => Y_LEVELS[value - 1] || ''}
        />
        {/* Tooltip也可以配置格式化，避免显示数值 */}
        <Tooltip formatter={(value) => Y_LEVELS[value - 1] || ''} />
        {/* 柱体绑定我们生成的数值字段计算高度 */}
        <Bar dataKey="barHeight" fill="#8884d8" />
      </BarChart>
    )
  }
  

适配调整说明 #

• 如果你的y轴分类顺序需要调整，直接修改Y_LEVELS数组的排列顺序即可，柱高会自动匹配新的等级顺序
• 如果需要给柱体加标签、自定义颜色，直接基于原始数据的y/x字段判断即可，不需要修改核心映射逻辑
• 该方案完全基于Recharts原生API实现，无额外依赖，兼容所有Recharts版本。

内容的提问来源于stack exchange，提问作者Umar Javed