react-native-svg-charts Areachart呈现额外的底线

时间:2018-12-12 12:12:40

标签: react-native react-native-svg

我正在使用react-native-svg-charts绘制一些图表。就我而言,我使用面积图(请参见下图)。当最后一个数据条目具有相同的值时,将出现一个底线

Actual

Expected

这是我渲染面积图的方式

<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>
    )

0 个答案:

没有答案