Как установить реквизиты для chart.js в React? - PullRequest
Новая
       28

Как установить реквизиты для chart.js в React?

0 голосов
/ 15 мая 2019

Я пытаюсь получить данные из базы данных SQL и показать эти данные на chart.js, но получаю эту ошибку:

Предупреждение: сбойный тип пропуска: недопустимая опораdata передано ChartComponent.

Мой код выглядит следующим образом: 

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';

class MinData extends Component{
    constructor(){
        super();
        this.state = {
            data: {
                labels: [],
                datasets: []
            }
        };
    }


    componentDidMount(){
        fetch('http://localhost:4000/api/myData?limit=6')
        .then (results =>{
            return results.json();
        }).then(data => {

            let receivedData = data.map((datapost) => {
                return(
                     {
                        data: {
                            labels: datapost.timestamp,
                            datasets: datapost.temp_0
                        }
                    }

                )
            })
            this.setState({data: receivedData}, function(){
                console.log(this.state.data);
            });
        })
    }


    render(){
        return(

            <div className="enContainer">

                <Line 
                    data={this.state.data}
                    options={{
                        title:{
                            display: true,
                            text: 'Fladan mätpunkt',
                            fontSize: 25
                        }
                }}
                />

            </div>
        )
    }
}
export default MinData;

Идея состоит в том, чтобы установить состояние data с выбраннымdata.

У меня заканчиваются идеи, но я думаю, что-то не так с тем, как я возвращаю данные из моей функции карты.

ОБНОВЛЕНИЕ: Это то, что я получаю в Почтальоне, когда выполняю тот же запрос с лимитом на получение двух объектов: 

[
    {
        "timestamp": "2019-01-17T18:14:20.000Z",
        "battery": 5.094,
        "temp_0": 23.375,
        "temp_10": 19.125,
        "temp_20": 19,
        "temp_30": 18.812,
        "temp_40": 18.562,
        "temp_50": 18.625,
        "temp_60": 18.688,
        "temp_70": 18.688,
        "temp_80": 18.188,
        "temp_90": 19,
        "temp_100": 18.75,
        "temp_110": 18.625,
        "temp_120": 18.5
    },
    {
        "timestamp": "2019-01-17T18:17:25.000Z",
        "battery": 5.104,
        "temp_0": 23.375,
        "temp_10": 19.125,
        "temp_20": 19,
        "temp_30": 18.812,
        "temp_40": 18.562,
        "temp_50": 18.688,
        "temp_60": 18.75,
        "temp_70": 18.688,
        "temp_80": 18.188,
        "temp_90": 19,
        "temp_100": 18.75,
        "temp_110": 18.625,
        "temp_120": 18.5
    }
]

1 Ответ

0 голосов
/ 15 мая 2019

Перед вызовом компонента Line необходимо проверить наличие данных в this.state.data.labels. Метод рендеринга запустился бы до того, как componentDidMount получит шанс вернуться и вызвать API, поэтому пустые данные передаются и передаются в компонент Line. 

  {
    this.state.data.labels.length && <Line
      data={this.state.data}
      options={{
        title: {
          display: true,
          text: 'Fladan mätpunkt',
          fontSize: 25
        }
      }}
    />
  }

Данные о состоянии должны иметь следующую структуру: 

{
    labels: ['First', 'Second'],
    datasets: [
      {
        label: 'My First dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: 'My Second dataset',
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ]
}
...