React native 是否有用于绘制实时时间序列数据折线图的React本机软件包?
我尝试过使用react-native svg图表、react-native highcharts,但没有任何帮助。我在绘制数据点、移动轴(根据时间)和标记轴时遇到问题React native 是否有用于绘制实时时间序列数据折线图的React本机软件包?,react-native,charts,timeserieschart,react-native-svg,react-native-svg-charts,React Native,Charts,Timeserieschart,React Native Svg,React Native Svg Charts,我尝试过使用react-native svg图表、react-native highcharts,但没有任何帮助。我在绘制数据点、移动轴(根据时间)和标记轴时遇到问题 <YAxis data={data1} style={{ marginBottom: xAxisHeight }} contentInset={verticalContentInset} svg={axesSvg}
<YAxis
data={data1}
style={{ marginBottom: xAxisHeight }}
contentInset={verticalContentInset}
svg={axesSvg}
numberOfTicks={ 5 }
/>
<View style={{ flex: 1, marginLeft: 10 }}>
<LineChart
style={ { flex: 1 } }
data={ data1 }
yAccessor={({ item }) => item.value}
xAccessor={({ item }) => item.date}
contentInset={{ left: 10, right: 25 }}
xScale={scale.scaleTime}
numberOfTicks={10}
svg={{
stroke: "#F7941D",
strokeWidth: 1.25
}}
>
<Grid/>
</LineChart>
<XAxis
data={data1}
svg={{
fill: 'black',
fontSize: 8,
fontWeight: 'bold',
rotation: 20,
originY: 30,
y: 5,
}}
xAccessor={({ item }) => item.date}
scale={scale.scaleTime}
numberOfTicks={10}
style={{ marginHorizontal: -15, height: 20 }}
contentInset={{ left: 15, right: 25 }}
formatLabel={(value) => dateFns.format(value, 'hh:mm:ss')}
/>
</View>
`
item.value}
xAccessor={({item})=>item.date}
contentInset={{左:10,右:25}
xScale={scale.scaleTime}
numberOfTicks={10}
svg={{
笔划:“F7941D”,
冲程宽度:1.25
}}
>
项目日期}
scale={scale.scaleTime}
numberOfTicks={10}
风格={{marginHorizontal:-15,高度:20}}
contentInset={{左:15,右:25}}
formatLabel={(值)=>dateFns.format(值'hh:mm:ss')}
/>
`
我的数据如下:
1:{value:119.6932,日期:周二2020年1月14日13:12:32 GMT-0500(东部标准时间)}
2:{数值:119.9372,日期:2020年1月14日星期二13:12:32 GMT-0500(东部标准时间)}
3:{数值:120.2093,日期:2020年1月14日星期二13:12:32 GMT-0500(东部标准时间)}
4:{数值:122.9826,日期:周二2020年1月14日13:12:32 GMT-0500(东部标准时间)}
5:{数值:114.2904,日期:2020年1月14日星期二13:12:32 GMT-0500(东部标准时间)}
以上是使用react原生svg图表实现的,在这里我可以根据实时时间移动x轴(时间),但这并不合适。
有人对格式有好的建议吗?谢谢目前我正在评估react native graph libs,并在这里发现了您的帖子。你已经解决你的问题了吗?你愿意分享你的知识吗。在不修复的情况下:这里有一些建议:但要注意版本号和。希望这能对你有所帮助。谢谢你的评论和信息。尝试了victory,但对我当时使用的数据格式没有帮助,仍然使用react原生svg图表,但现在能够正确设置时间格式。经过大量的研究,我发现RN对很多数据都不好,所以我开始最小化数据点(将一小时的数据平均到一个点,一天24个点,这非常容易绘制,但这仅限于RN。使用React,我能够使用D3生成良好的数据曲线