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

Question

这是我试过的代码：

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

Here is what i get

问题是如何填充图表的底部？它应该填充 y 轴上 0 以下的所有内容。区域应该一直到底部

Answer 1

在图形中绘制区域时，需要参考。任何人都无法知道您的图形将在何处结束，因此也无法知道填充应在何处停止。此外，如果你摆脱了 0 轴参考，你也摆脱了面积图的意义。

您的示例目前正在按预期工作（来自文档并进行了调整以适应您的情况：jsfiddle）。我不知道是否有办法做你正在寻找的东西（老实说找不到很好的理由）。如果我遗漏了一些东西，而你绝对想这样做，我想你可能会在数据的 MIN_VALUE 处使用假数据作为直线，并将其打印为 Area 图表......它应该看起来像这样： jsfiddle

但这对我来说没有意义。另外，您还必须弄清楚如何将其从图例中删除。

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

React - Rechart - How to fill bottom part of Area in Composed Chart (Rechart.js)?

javascript

reactjs

react-redux

recharts