如何创建可绘制的实时图表

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？

编辑的

这类似于blog post页面，最初我们只显示一定数量的帖子，当用户到达页面底部时，我们获取下一组帖子并显示它们。

Answer 1

Chartjs-plugin-缩放为用户"onPan"交互提供事件侦听器。您可以在这里访问它们，https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events

因此，我们的想法是在user pan上调用fetchRest()，这样您就可以在事件侦听器中附加函数调用，例如：

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