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

发布于 2025-01-09 06:22:39 字数 1478 浏览 1 评论 0原文

所以我有一个图表，其中包含几乎所有不同的大值。例如（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>

图表如下所示：图表图像

我希望放大这些值以显示曲线并显示所有刻度，但是不要重叠它们。

原文

So i have a chart with big values that are almost all different. For example (1024.3, 1024.1, ...). But the problem is that chart is not zooming those values to show the difference and also ticks on Y-axis are overlapping.

Chart code is:

<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>

And the chart is looking like this:
chart image

I would love to zoom in those values to show curves and also to show all ticks but not overlap them.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

段念尘 2025-01-16 06:22:39

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

工作代码：

<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>

最终图表图像：

So I managed to make it work by adding domain on Y-axis. Domain has interval from minimum value that I am passing and maximum value. Still there is a problem if u want to show all ticks because they overlap but in my case I am happy to show only maximum, minimum and average tick.

Working code:

<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>

Final chart image: