[英]Multiple Line Charts using react-native-svg-charts
I am trying to put multiple line charts showing different data in one graph but am unable to do so in react-native using react-native-svg-charts.我正在尝试将显示不同数据的多个折线图放在一张图中,但在使用 react-native-svg-charts 的 react-native 中无法这样做。
<View style= {{height: 200}}>
<LineChart
style={{ flex:1 }}
data={this.state.data}
svg={{ stroke: 'rgb(134, 65, 244)' }}
contentInset={{ top: 20, bottom: 20 }}
>
<Grid/>
</LineChart>
<LineChart
style={{position: 'absolute'}}
data={this.state.data1}
svg={{ stroke: 'rgb(168, 155, 50)' }}
contentInset={{ top: 20, bottom: 20 }}
>
<Grid/>
</LineChart>
</View>
The above code was what I was trying but am unable to get the correct design as I get only the first data's line chart.上面的代码是我正在尝试的,但无法获得正确的设计,因为我只获得了第一个数据的折线图。
Thanks!谢谢!
render() {
const data1 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
const data2 = [ -87, 66, -69, 92, -40, -61, 16, 62, 20, -93, -54, 47, -89, -44, 18 ]
const data = [
{
data: data1,
svg: { stroke: '#8800cc' },
},
{
data: data2,
svg: { stroke: 'green' },
},
]
return (
<LineChart
style={{ height: 200 }}
data={ data }
contentInset={{ top: 20, bottom: 20 }}
>
<Grid />
</LineChart>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.