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）中填充Area的底部？

1 个答案: