React recharts 图表未缩放以显示较小的值差异

Question

所以我有一个图表，其中包含几乎所有不同的大值。例如（1024.3、1024.1、...）。但问题是图表没有缩放这些值以显示差异，而且 Y 轴上的刻度线重叠。

图表代码为：

<div className="chart">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart
                    width={1000}
                    height={300}
                    data={props.chartData.data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 0,
                    }}
                >
                    <XAxis dataKey={props.chartData.xAxis} stroke="#000000" />
                    <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} />
                    <Tooltip cursor={false} />
                    <Legend />
                    <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} />
                    <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" />
                    <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} />
                </LineChart>
            </ResponsiveContainer>
        </div>

图表看起来像这样： chart image

我很想放大这些值以显示曲线并显示所有刻度但不与它们重叠。

Answer 1

所以我设法通过在 Y-axis 上添加域来使其工作。域具有从我传递的最小值到最大值的间隔。如果你想显示所有刻度仍然存在问题，因为它们重叠，但在我的情况下，我很乐意只显示最大、最小和平均刻度。

工作代码：

<div className="chart">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart
                    data={props.chartData.data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 0,
                    }}
                >
                    <XAxis dataKey={props.chartData.xAxis} stroke="#000000" />
                    <YAxis type="number" padding={{ top: 50, bottom: 30 }} ticks={props.chartData.minmaxavg.arrayMinMax} stroke="#000000" interval={0} domain={[props.chartData.minmaxavg.min, props.chartData.minmaxavg.max]} />
                    <Tooltip cursor={false} />
                    <Legend />
                    <Line type="monotone" dataKey={props.chartData.value1} stroke="#000000" dot={false} />
                    <ReferenceLine y={props.chartData.minmaxavg.avg} stroke="white" strokeDasharray="4 4" />
                    <Line type="monotone" dataKey={props.chartData.value2} stroke="#6EDEFF" dot={false} />
                </LineChart>
            </ResponsiveContainer>
        </div>

最终图表图像：

React recharts 图表未缩放以显示较小的值差异

React recharts chart is not zooming to show small value difference

javascript

reactjs

recharts