Javascript React-Rechart-如何填充合成图（Rechart.js）中区域的底部？

以下是我尝试的代码：

            <ResponsiveContainer width="100%" height={500}>
                <ComposedChart
                    // width={500}
                    // height={400}
                    data={data}
                    margin={{
                        top: 20,
                        right: 20,
                        bottom: 20,
                        left: 20,
                    }}>
                    <CartesianGrid stroke="#f5f5f5" />
                    <XAxis axisLine={false} tickLine={false} dataKey="name" />
                    <YAxis
                        tick={{fill: '#4a4a4a', fontFamily: 'Roboto'}}
                        type="number"
                        domain={['dataMin', 'dataMax']}
                        yAxisId="left"
                        tickLine={false}
                        axisLine={false}
                    />
                    <YAxis
                        tick={{fill: '#4a4a4a'}}
                        unit="x"
                        type="number"
                        domain={['dataMin', 'dataMax']}
                        yAxisId="right"
                        orientation="right"
                        tickCount={10}
                        tickLine={false}
                        axisLine={false}
                    />
                    <Tooltip />
                    <Legend verticalAlign="top" align="right" height={40} />
                    <Area yAxisId="left" type="linear" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
                    <Area yAxisId="left" type="linear" dataKey="pv" fill="#413ea0" stroke="#413ea0" />
                    <Line yAxisId="right" dot={false} type="linear" dataKey="uv" stroke="#ff7300" />
                    {/* <Scatter dataKey="cnt" fill="red" /> */}
                </ComposedChart>
            </ResponsiveContainer>

问题是如何填充图表的底部？
它应该填充y轴上0以下的所有内容。
区域应一直到底部
在图形中绘制区域时，需要参考。任何人都无法知道图形将在何处结束，因此填充应在何处停止。此外，如果去掉0轴参照，也就去掉了面积图的含义

您的示例目前正在按预期工作（来自文档，其中有一个调整以适应您的情况：）。
我不知道是否有一种方法可以满足你的需求（老实说，我找不到一个好的理由）。如果我遗漏了什么，而你绝对想这么做，我想你可能会使用假数据作为数据最小值的直线，并将其打印为
区域
图表。。。应该是这样的：

但这对我来说毫无意义。此外，您还必须找出如何将其从图例中删除。
在图形中绘制区域时，您需要一个参考。任何人都无法知道图形将在何处结束，因此填充应在何处停止。此外，如果去掉0轴参照，也就去掉了面积图的含义

您的示例目前正在按预期工作（来自文档，其中有一个调整以适应您的情况：）。
我不知道是否有一种方法可以满足你的需求（老实说，我找不到一个好的理由）。如果我遗漏了什么，而你绝对想这么做，我想你可能会使用假数据作为数据最小值的直线，并将其打印为
区域
图表。。。应该是这样的：

但这对我来说毫无意义。另外，您还必须找出如何将其从图例中删除。
好的，您对如何填充线上、元素下的区域有何建议？我之所以使用它，是因为它能够填充行下的区域，但当我的域被破坏时，它将无法正常工作0@Mare第二个JSFIDLE似乎正是这样做的。据我所知，
区域
填充了您的值与YAxis上的0参考值之间的剩余空间。因此，如果您仍然希望填充0下的区域，则可以使用另一个
区域
组件，将绘制的值作为数据集的最小值（因此它会粘贴到图形底部，而不会被实际看到），并使用与要填充0下的区域相同的颜色填充它。我设法修复了它，对于具有值[{value1，globalMinimum}，{value2，globalMinimum}]的范围数据，我添加了自定义工具提示，在其中忽略全局最小值@Ragnar，谢谢你的建议OK，你对如何填充线下的区域有什么建议吗？我之所以使用它，是因为它能够填充行下的区域，但当我的域被破坏时，它将无法正常工作0@Mare第二个JSFIDLE似乎正是这样做的。据我所知，
区域
填充了您的值与YAxis上的0参考值之间的剩余空间。因此，如果您仍然希望填充0下的区域，则可以使用另一个
区域
组件，将绘制的值作为数据集的最小值（因此它会粘贴到图形底部，而不会被实际看到），并使用与要填充0下的区域相同的颜色填充它。我设法修复了它，对于具有值[{value1，globalMinimum}，{value2，globalMinimum}]的范围数据，我添加了自定义工具提示，在其中忽略全局最小值@拉格纳，谢谢你的建议