Реагируйте на загрузку гугл-чартов после звонка ajax - PullRequest
Новая
       27

Реагируйте на загрузку гугл-чартов после звонка ajax

0 голосов
/ 22 апреля 2020

Я изучаю React для нового проекта и пытаюсь отобразить диаграмму Google в React. Данные поступают из API в формате JSON. Вот как выглядят данные, когда я отображаю this.state.chartData внутри результата рендеринга:

[[30,7.4074101242,7.3616415376,7.4531787107,7.4853587327,7.4104486584,7.5602688071, null], [60,7.3863675982,7.357658375, 7.4150768214,7.4160903322,7.3768180476,7.4553626167,7.24], [75,7.3791653682,7.3555561367,7.4027745998,7.3818045516,7.3482003967,7.4154087065,7.35], [90,7.3736544401,7.3527478235,7.3945610567,7.3503477497,7.3169193569,7.3837761425,7.22], [105, 7.370215688,7.3500473051,7.3903840708,7.320321379,7.2855547395,7.3550880184,7.24], [120,7.3682826912,7.3476374764,7.3889279059,7.2867679022,7.2503262994,7.323209505,7.25], [150,7.3713009875,7.3489746737,7.3936273013,7.2367832163,7.1911558947,7.2824105378, нуль] ]

К сожалению, я получаю следующую ошибку при попытке использовать эти данные для строк: Невозможно нарисовать диаграмму: данные не указаны. Я предполагаю, что проблема в том, что я не рисую график в нужное время в жизненном цикле компонента.

Это мой код прямо сейчас: * 101 0 * 

class TrendGraph extends React.Component {

  loadData() {
    console.log("loading data");
    fetch('http://127.0.0.1:5000/resultSingle/arterial/ph')
      .then(response => response.json())
      .then(data => {
        this.setState({ chartData: data });
      })
      .catch(err => console.error(this.props.url, err.toString()))
  }

  constructor(props) {
    super(props);
    this.state = { 
      chartData:null
    }    
  }

  componentDidMount() {
    console.log('GrandChild did mount.');
    this.loadData()
  }

  render() { 
    return (
      <Card small className="h-100">
        <CardHeader className="border-bottom">
          <h6 className="m-0">{ this.props.title }</h6>
        </CardHeader>
        <CardBody className="pt-0">
          <Chart
            width={"100%"}
            height={"250px"}
            chartType="LineChart"
            loader={<div>Loading Chart</div>}
            columns={[ ... ]}    
            rows={ this.state.chartData }            
            options={{ ... }}
          />
        </CardBody>
      </Card>
    );
  }
}

Я пробовал много разных подходов, но ничего не получалось. Если бы кто-то мог указать мне правильное направление, вы бы сделали мой день. Заранее спасибо!

...