如何解决如何使一条区域线显示在同一图形上的另一个区域上?
使用 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 举报,一经查实,本站将立刻删除。