Question

可以使用一些帮助来尝试使用Victory创建简单的折线图。

我要做什么：

我基本上是想创建一个折线图，以显示最近10分钟的随机数。我每3秒生成一个新的随机数，并将该数字添加到折线图中。

因此，X轴应介于0分钟到10分钟之间，Y轴应为给定时间内的实际兰特数。

我的主要问题是我对如何以3秒为间隔从0到10分钟创建X轴感到迷茫

我到目前为止所拥有的：

这是一个代码沙盒，其中包含我到目前为止所做的一切，因此您可以尝试一下：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>
    )
  }
}

Answer 1

代码沙箱及其解决方案：https://codesandbox.io/s/989zx8v6v4

更改：

在状态

startTime

state.data.date 重命名为 state.data.time ，其中包含距统计信息的秒数
componentDidMount（）
getRandNum（）以秒为单位计算时差
VictoryAxis 将X轴的格式设置为“ m：ss”

图表组件：

import Butter from 'buttercms'

export default (ctx, inject) => {
  inject('butter', Butter(process.env.API_KEY))
}

在0-10分钟的时间范围内反应胜利折线图

1 个答案: