有没有办法在保持我的最大值的同时为 recharts 轴设置均匀大小的刻度?
Is there a way to have evenly sized ticks for recharts axis while keeping my max value?
我有一个如下所示的数据数组,我想使用 recharts 以特定方式显示它。
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>
结果如下even ticks image
但我希望我的上限刻度是我的 'total' 字段的总和(在本例中为 18)。
为了实现这一点,我尝试将 'YAxis' 组件中的 'domain' 属性 设置为 ['0', MAX]。(MAX 是我的 'total's 的总和)但是现在我的图表看起来像这样。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}
我有一个如下所示的数据数组,我想使用 recharts 以特定方式显示它。
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>
结果如下even ticks image
但我希望我的上限刻度是我的 'total' 字段的总和(在本例中为 18)。 为了实现这一点,我尝试将 'YAxis' 组件中的 'domain' 属性 设置为 ['0', MAX]。(MAX 是我的 'total's 的总和)但是现在我的图表看起来像这样。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}