MUI X-Charts 7.0.0：能否将BarChart的Y轴数值替换为字符串？

完全可行，你可以通过配置Y轴的tickFormatter属性实现这个需求。该函数会接收每个刻度的原始数值，返回对应的自定义文本，不会影响你已完成的其他样式配置。

示例代码如下：

import { BarChart } from '@mui/x-charts/BarChart';

// 示例数据
const chartData = [
  { group: 'Group 1', score: 0 },
  { group: 'Group 2', score: 1 },
  { group: 'Group 3', score: 2 },
];

// 自定义刻度格式化函数
const formatYAxisTicks = (value) => {
  switch (value) {
    case 0:
      return 'Bad';
    case 1:
      return 'Regular';
    case 2:
      return 'Good';
    default:
      return value; // 处理意外数值，可选保留原始值
  }
};

export default function CustomYAxisBarChart() {
  return (
    <BarChart
      width={600}
      height={350}
      series={[{ data: chartData.map(item => item.score) }]}
      xAxis={[{ data: chartData.map(item => item.group), scaleType: 'band' }]}
      // 在Y轴配置中添加tickFormatter
      yAxis={[{ tickFormatter: formatYAxisTicks }]}
      // 保留你已配置的其他样式属性
    />
  );
}

如果你的Y轴已有domain等其他配置，只需在原有配置对象中追加tickFormatter即可，无需修改现有样式设置。

内容的提问来源于stack exchange，提问作者Agustin Castillo