2

我正在使用 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>
    )
4

0 回答 0