如何創建可平移的實時圖表

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
   }
},