Блог

У меня есть массив данных, и у меня есть массив времени. Это массивы:

 const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
};
 

Через секунду я хочу отобразить график до числа 60, через 2,5 секунды график до числа 85 и так далее …

Это код, который я пытался сделать до сих пор, но он не работает для меня

 import React, { useEffect, useState } from 'react';
import './App.css';
import { Bar } from 'react-chartjs-2';

function App() {
  const [score, setScore] = useState('');
  const [chartData, setChartData] = useState('');

  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 60, 75, 50, 40, 0, 20],
  };

  useEffect(() => {
    Reps.TimeOfMove.forEach((time, index) => {
      const interval = setInterval(() => setScore(Reps.ScoreOfMove[index]), time * 1000);
      return () => {
        clearInterval(interval);
      };
    })

  }, [])

  return (
    <div>
      {score}
      {<Bar
        data={Reps}
        width={100}
        height={50}
        options={{ maintainAspectRatio: false }}
      />}
    </div>
  );
}

export default App;
 

Я хочу каждый раз отображать другую полосу графика в зависимости от времени ее появления.

Таким образом, разница во времени перемещения составляет 0,5, 1, 2, … и т.д. Я бы использовал наименьшее значение для интервала, чтобы поймать все время.

Таким образом, интервал времени составляет 500 мс.

Каждый временной интервал срабатывает, мы можем суммировать время и иметь прошедшее время. Теперь мы можем отфильтровать данные по прошедшему времени.

 const INTERVAL_TIME = 500;
function App() {
  const [score, setScore] = useState('');
  const [currentTime, setCurrentTime] = useState(0);

  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 60, 75, 50, 40, 0, 20],
  };

  useEffect(() => {
      // TODO: add a max time to stop interval
      const interval = setInterval(() => {
         setCurrentTime((oldTime) => oldTime   INTERVAL_TIME);
      }, INTERVAL_TIME);
      return () => {
        clearInterval(interval);
      };
  }, [])
  
  const currentTimeInSec = currentTime/1000;
  // now filter the data
  const chartData = Reps.TimeOfMove.filter((moveTime) => currentTimeInSec <= moveTime).map((moveTime, index) => ({ x: moveTime, y: Reps.ScoreOfMove[index] }))

  return (
    <div>
      {score}
      {<Bar
        data={Reps}
        width={100}
        height={50}
        options={{ maintainAspectRatio: false }}
      />}
    </div>
  );
}

export default App;
 

для вашего использования вам необходимо использовать setTimeout instaed setIntreval