Реагируйте на график линии победы за 0-10 минутный период - PullRequest
Новая
       24

Реагируйте на график линии победы за 0-10 минутный период

0 голосов
/ 11 ноября 2018

Можно использовать некоторую помощь, пытаясь создать простую линейную диаграмму с Победой.

Что я пытаюсь сделать:

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

Таким образом, ось X должна быть от 0 минут до 10 минут, а ось Y должна быть фактическим rand num для данного времени.

Моя главная проблема в том, что я довольно растерялся, пытаясь создать ось X с интервалом 0–10 минут с интервалом в 3 секунды.

Что у меня есть до сих пор:

Вот песочница для кода с тем, что я уже сделал, чтобы вы могли попробовать: https://codesandbox.io/s/6wnzkz512n

Основной Chart компонент: 

import React from 'react'
import { VictoryChart, VictoryLine, VictoryAxis } from 'victory'

class Chart extends React.Component {
  constructor() {
    super()
    this.state = {
      data: []
    }
  }

  // Add a new data point every 3 seconds
  componentDidMount() {
    this.getRandNum()
    setInterval(this.getRandNum, 3000)
  }

  // get rand num from 1-5 along with current time,
  // and add it to data. not sure if this is right approach
  getRandNum = () => {
    const newData = {
      date: new Date(),
      num: Math.floor(Math.random() * 5) + 1
    }

    this.setState({
      data: [...this.state.data, newData]
    })
  }

  render() {
    return (
      <VictoryChart width={600} height={470}>
        <VictoryLine
          style={{
            data: { stroke: 'lime' }
          }}
          data={this.state.data}
          x="date"
          y="num"
        />
      </VictoryChart>
    )
  }
}

1 Ответ

0 голосов
/ 12 ноября 2018

Код Песочница с решением: https://codesandbox.io/s/989zx8v6v4

Изменения:

  • Добавить startTime в состоянии
  • state.data.date переименовывается в state.data.time и содержит количество секунд от stat
  • Инициализация в componentDidMount ()
  • getRandNum () вычислить разницу во времени в секундах
  • VictoryAxis отформатировать ось X как "m: ss"

Chartкомпонент: 

    class Chart extends React.Component {
      constructor() {
        super();
        this.state = {
          data: [],
          startTime: null
        };
      }

      // Add a new data point every 3 seconds
      componentDidMount() {
        const startTime = new Date();
        const time = 0;
        const num = Math.floor(Math.random() * 5) + 1;

        this.setState({ data: [{ time, num }], startTime });
        setInterval(this.getRandNum, 3000);
      }

      // get rand num from 1-5 along with current time,
      // and add it to data. not sure if this is right approach
      getRandNum = () => {
        const actualTime = new Date();
        let num = Math.floor(Math.random() * 5) + 1;
        let time = Math.round((actualTime - this.state.startTime) / 1000);

        this.setState({
          data: [...this.state.data, { time, num }]
        });
      };

      render() {
        return (
          <VictoryChart width={600} height={470}>
            <VictoryAxis dependentAxis />
            <VictoryAxis
              tickFormat={t =>
                `${Math.floor(t / 60)}:${Math.round(t % 60)
                  .toString()
                  .padStart(2, "0")}`
              }
            />
            <VictoryLine
              style={{
                data: { stroke: "lime" }
              }}
              data={this.state.data}
              x="time"
              y="num"
            />
          </VictoryChart>
        );
      }
    }
...