javascript - 如何在胜利图中将渐变填充到 x 轴

Question

我正在尝试将相同的渐变填充到 x 轴的图表区域中。如下图所示。我们怎么能这样做。我在这里缺少什么？

请协助。

我试着给fill: "url(#myGradient)",样式VictoryAxis对象。但似乎不起作用。

这是我的代码。

import React from 'react';
import { VictoryChart, VictoryStack, VictoryGroup, VictoryArea, VictoryPortal, VictoryScatter, VictoryAxis, VictoryTheme } from 'victory';

class VictoryDemo1 extends React.Component {
    render() {

        return (
            <div>                
                <div className="chart-areea">
                    <div className="victory-chart">
                        <h2>Victory</h2>
                        <svg style={{ height: 0 }}>
                            <defs>
                                <linearGradient id="myGradient">
                                    <stop offset="0%" stopColor="red" />
                                    <stop offset="25%" stopColor="orange" />
                                    <stop offset="50%" stopColor="gold" />
                                    <stop offset="75%" stopColor="yellow" />
                                    <stop offset="100%" stopColor="green" />
                                </linearGradient>
                            </defs>
                        </svg>
                        <VictoryChart
                            scale={{ x: "time" }} width={400} height={400}>
                            <VictoryStack colorScale={["#005aff50"]}>
                                <VictoryGroup
                                    data={[
                                        { x: new Date(1986, 1, 1), y: 0 },
                                        { x: new Date(1996, 1, 1), y: 4 },
                                        { x: new Date(2006, 1, 1), y: 1 },
                                        { x: new Date(2016, 1, 1), y: 0 }
                                    ]}
                                >
                                    <VictoryArea
                                        style={{
                                            data: { fill: "url(#myGradient)" }
                                        }}
                                        interpolation="natural"
                                    />
                                    <VictoryPortal>
                                        <VictoryScatter
                                            style={{ data: { fill: "red" } }}
                                        />
                                    </VictoryPortal>
                                </VictoryGroup>

                            </VictoryStack>

                            <VictoryAxis
                                style={
                                    {
                                        axis: {
                                            stroke: 'url(#myGradientk',
                                            fill: "url(#myGradient)",
                                            strokeWidth:10
                                        },
                                        ticks: {
                                            size: 15,
                                            stroke: 'black',
                                            strokeOpacity: 0.2,
                                            strokeDasharray: '5, 5',
                                        },
                                        grid: {
                                            stroke: 'rgba(0, 0, 0, 0.2)',
                                            strokeWidth: 1,
                                            strokeDasharray: '5, 5',
                                        },
                                        tickLabels: {
                                            fontSize: '9px',
                                            fontFamily: 'inherit',
                                            fillOpacity: 1,
                                            marginLeft: 10,
                                            padding: 0
                                        },
                                        axisLabel: {
                                            fontsize: 13
                                        }
                                    }
                                }

                            />
                            <VictoryAxis dependentAxis
                                label="Audience Size"
                            />
                        </VictoryChart>
                    </div>
                </div>
            </div>
        );
    }
}

export default VictoryDemo1;