如何使一条区域线显示在同一图形上的另一个区域上？

问题描述

使用 React Recharts 库*

我正在尝试重新创建这个：（不在 recharts.js 中）

我有这个：（使用 recharts.js）

我正在尝试使背景图的灰线出现在紫色前景图上。

这是我的代码：

<AreaChart width={730} height={400} data={this.state.chartObject}
  margin={{ top: 10,right: 30,left: 30,bottom: 30 }}>
  <defs>
    <linearGradient id="colorPrevIoUsFYTD" x1="0" y1="0" x2="0" y2="400">
      <stop offset="10%" stopColor={this.props.colors['secondaryGradient1']} stopOpacity={0.8}/>
      <stop offset="75%" stopColor={this.props.colors['secondaryGradient2']} stopOpacity={0}/>
    </linearGradient>
    <linearGradient id="colorFYTD" x1="0" y1="0" x2="0" y2="400">
      <stop offset="10%" stopColor={this.props.colors['primaryGradient1']} stopOpacity={0.8}/>
      <stop offset="75%" stopColor={this.props.colors['primaryGradient2']} stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" hide={true}/>
  <YAxis hide={true}/>
  <Cartesiangrid horizontal={false} vertical={false} />
  <Legend iconType="rect"/>
  <Tooltip style={toolTipStyle} formatter={(value)=> {return this.numFormatter(value)}}/>
  <Area type="linear" dataKey="PrevIoUsFYTD" stroke={this.props.colors['secondaryGradient1']} fillOpacity={1} fill="url(#colorPrevIoUsFYTD)" dot={true}/>
  <Area type="linear" dataKey="FYTD" stroke={this.props.colors['primaryGradient1']} fillOpacity={1} fill="url(#colorFYTD)" dot={true}/>
</AreaChart>

我需要添加什么属性以及将灰色线强制添加到紫色图形上的位置？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）