我正在使用react-native-svg-charts绘制一些图表。就我而言,我使用面积图(请参见下图)。当最后一个数据条目具有相同的值时,将出现一个底线
这是我渲染面积图的方式
<AreaChart style = {{height: '100%', width: '100%' }} data = {Object.values(chartData)} curve={shape.curveBasis}
svg={{ fill: 'url(#gradient)', stroke: 'blue', fillOpacity: 0.8, scale: 1.002, strokeWidth: 0 }}
contentInset={{ top: scaleHeight(10), bottom: scaleHeight(10) }} animate >
<Gradient/>
</AreaChart>
渐变代码如下
const Gradient = ({ index }) => (
<Defs key={index}>
<LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
<Stop offset={'0%'} stopColor="blue" stopOpacity={1}/>
<Stop offset={'100%'} stopColor="white" stopOpacity={1}/>
</LinearGradient>
</Defs>
)