Создание графа с помощью ReactJS и ChartJS

Question

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

Нет зарегистрированных ошибок, и вот так выглядит мой график:

Я думаю, что ошибкой может быть chartData объект, который я используюдля передачи данных:

  chartData:{
    labels: this.timeDataArray,
    datasets: this.priceDataArray,
    backgroundColor:['rgba(255,99,132,0.6)']
  }

Я использую act-chartjs-2 в качестве модуля для моих диаграмм и выборки для http-запроса.

Вот мой полныйкод:

export class Chart extends Component{
  constructor(props){
    super(props);
    this.state = {
        isLoading: false,
        data: [],
      chartData:{
        labels: this.timeDataArray,
        datasets: this.priceDataArray,
        backgroundColor:['rgba(255,99,132,0.6)']
      }
    }
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    fetch("https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=600")
    .then(response => response.json())
    .then(data=>{
      var fetchedData = data.Data;
      var timeDataArray = [];
      var priceDataArray = [];
      console.log(timeDataArray)
      console.log(priceDataArray)
      for(var x = 0; x < fetchedData.length;x++){
        var exampleTimeData = fetchedData[x].time
        var examplePriceData = fetchedData[x].high
        timeDataArray.push(exampleTimeData)
        priceDataArray.push(examplePriceData)

      }

    })
    .catch(error => console.log("parsing failed", error))
  }

    render(){
        return(
          <div className="chart">
            <Line
              data={this.state.chartData}
              options={{
                maintainAspectRatio:false
              }}
            />
          </div>
        )
    }
}

Вопрос: Почему мои данные не отображаются, поскольку я передаю свойство label с метками времени и фактическими данными в виде dataset?

Answer 1

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

export default class Chart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: false,
            chartData: {
                labels: ['First', 'Second', 'Third', 'Fourth'],
                datasets: [
                    {
                        label: ['My Chart'],
                        data: [100, 200, 300, 400],
                        backgroundColor: ['#26331d'],
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }
                ]
            }
        }
    }

    componentDidMount() {
        this.fetchData()
    }

    fetchData() {
        var timeDataArray = []
        var priceDataArray = []
        fetch(
            'https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=50'
        )
            .then(response => response.json())
            .then(data => {
                var fetchedData = data.Data

                console.log(timeDataArray)
                console.log(priceDataArray)

                for (var x = 0; x < fetchedData.length; x++) {
                    var exampleTimeData = fetchedData[x].time
                    var examplePriceData = fetchedData[x].high
                    timeDataArray.push(exampleTimeData)
                    priceDataArray.push(examplePriceData)
                }
            })
            .catch(error => console.log('parsing failed', error))
        this.setState({
            chartData: {
                labels: timeDataArray,
                datasets: [
                    {
                        label: ['Population'],
                        data: timeDataArray,
                        backgroundColor: ['#26331d', '#507935', '#63ef06', '#d0eabf'],
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }
                ]
            }
        })
    }

    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state.chartData}
                    width={200}
                    height={200}
                    options={{
                        maintainAspectRatio: false
                    }}
                />
            </div>
        )
    }
}