[英]How to create a pannable real-time chart
I'm using react-chart-2
with chartjs-plugin-zoom
and chartjs-plugin-streaming
plugins.我将
react-chart-2
与chartjs-plugin-zoom
和chartjs-plugin-streaming
插件一起使用。 Now I'm showing the last 20 data points in the chart.现在我在图表中显示最后 20 个数据点。 I want to modify this to
pannable
chart.我想将其修改为可
pannable
图表。
const [sensorReadings, setSensorReadings] = useState();
useEffect(()=>{
// code for fetch initial readings from back end
},[]);
datasets: [
{
backgroundColor: colors.indigo[500],
data: sensorReadings.map(reading => ({ x: reading.time, y: reading.value })),
label: 'This year',
fill: false
}
]
This is my datasets object.这是我的数据集对象。 Here the sensor readings object will have last 20 readings.
这里传感器读数对象将有最后 20 个读数。 When a user scrolls the charts (scrolls to the older date), I want to trigger a function say
fetchRest()
, that will fetch the next 20 readings and update the state.当用户滚动图表(滚动到旧日期)时,我想触发一个函数说
fetchRest()
,它将获取接下来的 20 个读数并更新状态。 My question is how to trigger that fetchRest
, when a user scrolls?我的问题是如何在用户滚动时触发
fetchRest
?
Edited已编辑
This is similar to blog post page, where at the beginning we display only certain amount of posts and when the user reaches the bottom of the page, we fetch next set of posts and display them.这类似于博客帖子页面,在开始时我们只显示一定数量的帖子,当用户到达页面底部时,我们获取下一组帖子并显示它们。
The chartjs-plugin-zoom provide an event listeners for user "onPan"
interaction. chartjs-plugin-zoom 为用户
"onPan"
交互提供了一个事件监听器。 You can access them here https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events您可以在此处访问它们https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events
So the ideas is to call fetchRest() on user pan, so you can attach your function call, in the event listener, like :所以想法是在用户平移上调用 fetchRest(),这样您就可以在事件侦听器中附加您的函数调用,例如:
pan: {
onPan: function(chart){
fetchRest() //fetch call
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.