如何创建可平移的实时图表

Question

我将react-chart-2与chartjs-plugin-zoom和chartjs-plugin-streaming插件一起使用。 现在我在图表中显示最后 20 个数据点。 我想将其修改为可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
       }
   ]

这是我的数据集对象。 这里传感器读数对象将有最后 20 个读数。 当用户滚动图表（滚动到旧日期）时，我想触发一个函数说fetchRest() ，它将获取接下来的 20 个读数并更新状态。 我的问题是如何在用户滚动时触发fetchRest ？

已编辑

这类似于博客帖子页面，在开始时我们只显示一定数量的帖子，当用户到达页面底部时，我们获取下一组帖子并显示它们。

Answer 1

chartjs-plugin-zoom 为用户"onPan"交互提供了一个事件监听器。 您可以在此处访问它们https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events

所以想法是在用户平移上调用 fetchRest()，这样您就可以在事件侦听器中附加您的函数调用，例如：

pan: {
   onPan: function(chart){
      fetchRest() //fetch call
   }
},