有没有办法让重新绘制轴的刻度大小均匀，同时保持最大值？

Question

我有一个如下所示的数据数组，我想使用图表以特定方式显示它。

const severityExampleData: any = [
    {symptom_type: 'chest pain', mild: 1, moderate: 2, severe: 1, total: 4},
    {symptom_type: 'pursiness', mild: 2, moderate: 1, severe: 10, total: 13},
    {symptom_type: 'cough', mild: 0, moderate: 0, severe: 1, total: 1},
];

我希望我的 Y 轴具有均匀的刻度大小，并且我希望它们是 5 个刻度，所以我使用了以下解决方案。

    <ResponsiveContainer width='100%' aspect={4.8/3.0}>
        <BarChart data={data} margin={{top: 0, left: 0, right: 0, bottom: 0}}>
            <CartesianGrid strokeDasharray="3" vertical={false} />
            <XAxis reversed dataKey="symptom_type" tickLine={false} axisLine={false}/>
            <YAxis orientation='right' tickLine={false} axisLine={false} tickCount={5} domain={['auto', MAX]}/>
            <Tooltip />
            {fieldNames.map((value: any, i:number) => {
                console.log(value);
                return (
                    <Bar name={value} barSize={50} 
                    radius={i === fieldNames.length - 1 ? [10, 10, 0, 0]: [0, 0, 0, 0]} 
                    dataKey={value} stackId='a' fill={colors[i]}/>);
            })}
        </BarChart>
    </ResponsiveContainer>

结果如下。甚至刻度图像

但我希望我的上限刻度是我的“总计”字段的总和（在本例中为 18）。为了实现这一目标，我尝试将“YAxis”组件中的“domain”属性设置为[“0”，MAX]。（MAX是我的“总计”的总和）但现在我的图表看起来像这样。刻度的最大值

实际上我想要 5 个刻度来平均划分我的 Y 轴，并且我的最高刻度为 MAX。抱歉，如果我的英语很粗糙，我的英语不太好。

Answer 1

我用它解决了

const tickArray = [0, Math.trunc(MAX/4), Math.trunc(MAX/2), Math.trunc(3*MAX/4), MAX];

和

ticks={tickArray} domain={[0, MAX]}

在我的<YAxis>组件中并删除

tickCount={5}