有没有办法在保持我的最大值的同时使图表轴的刻度线大小均匀？

问题描述

我有一个像下面这样的数据数组，我想使用图表以特定的方式显示。

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,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]} 
                    dataKey={value} stackId='a' fill={colors[i]}/>);
            })}
        </BarChart>
    </ResponsiveContainer>

结果将如下所示。even ticks image

但是我希望我的上限是我的“总计”字段的总和（在本例中为18）。 为此，我尝试将“ YAxis”组件中的“ domain”属性设置为['0'，MAX]。（MAX是我的'total'的总和），但是现在我的图表看起来像这样。max value for ticks >

实际上，我希望5个刻度线将我的Y轴平均分割，而我的最高刻度线则为MAX。 抱歉，如果我的英语不好，那我就不好。

解决方法

我用

解决了

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}