react-native - 是否有用于绘制实时时间序列数据折线图的 React-native 包?
问题描述
我尝试过使用 react-native-svg-charts、react-native-highcharts 但没有帮助。我无法绘制数据点、移动轴(根据时间)和标记轴。
<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>
`
我的数据是这样的:
1: {value: 119.6932, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
2: {value: 119.9372, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
3: {value: 120.2093, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
4: {value: 122.9826, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
5: {value: 114.2904, date: Tue Jan 14 2020 13:12:32 GMT-0500 (Eastern Standard Time)}
以上是使用 react-native-svg-charts 实现的,在这里我能够以某种方式根据实时时间移动 x 轴(时间),但它不正确。有没有好的格式建议?谢谢
解决方案
推荐阅读
- deep-learning - 填充和膨胀会影响卷积层中的 FLOP 数量吗?
- postgresql - 如何在postgres plpgsql中动态地从时间戳中提取毫秒?
- .net - EF Core ForeignKey-like 关系
- c# - 需要帮助为 Dropbox 编写下载器
- keras - 使用 Keras ImageDataGenerator 增强边界框
- ruby-on-rails - Graphhopper - 覆盖权重类并将其集成到 Ruby on Rails
- cucumber-jvm - 如果一个场景失败,继续黄瓜特征文件中的下一个场景
- java - Spring 集成中的成功通道是动态的
- c# - 检索数据网格上的特定行
- php - 如何显示用户的最后记录