是否可以在 MUI X-Charts 中的 y 轴上放置字符串？

Question

我正在使用 MUI X-Charts BarChart，我可以设置大多数所需道具的样式，但我的 yAxis 从 0 到 2，我想将它们显示为“Bad”（0）、“Regular”（1）和“Good” “（2）。可以这样做吗？

使用@mui/x-charts 7.0.0

Answer 1

在您的

yAxis

配置中，将

valueFormatter

属性指定为在给定刻度值的情况下返回所需文本的函数。示例：

<LineChart
   yAxis={[{
      ...otherOptions,
      valueFormatter: (value) => ['Bad', 'Regular', 'Good'][value],
   }]}
/>

通常，您还应该选择 y 轴上出现的刻度，将它们限制为您的值 0、1、2，但到目前为止，我个人还无法让

tickInterval

和

tickLabelInterval

在 y 上工作-轴，仅在 x 轴上。在这种情况下，我的技巧是为其他刻度值放置一个空字符串。例如

valueFormatter: (value) => {
   // Only at the integer tick positions
   if (value === Math.round(value)) {
      return ['Bad', 'Regular', 'Good'][value]
   }
   return ''
}