图形JS无法正确呈现,仅在窗口调整大小时才能正确呈现数据

时间:2020-05-06 21:58:12

标签: javascript reactjs chart.js

我正在使用Graph JS库来绘制电影数据库API中的收视率数据。

我正在使用异步获取功能来收集数据,然后将其转换为JSON,然后我将获取这些数据并使用它来绘制图形。

图形可以正确呈现,但仅在调整窗口大小时才能呈现。

这是我代码的相关部分:

    async graphList(season) {
        const response = await fetch(`//www.omdbapi.com/?apikey=${apiKey}&i=${imdbID}&Season=${season}`);
        const data = await response.json();
        console.log(data);
        this.setState({
            screenType: 'graph'
        });

        for (let i = 0; i < data.Episodes.length; i++) {
            episodeRatings.push({
                'episode': data.Episodes[i].Episode,
                'name': data.Episodes[i].Title,
                'rating': data.Episodes[i].imdbRating,
            });
        }
        for (let i = 0; i < data.Episodes.length; i++) {
            xlabels.push(`s${data.Season}e${episodeRatings[i].episode} "${episodeRatings[i].name}"`);
            chartData.push(episodeRatings[i].rating);
        }
    }
    render() { 

        if (this.state.screenType === 'init'){
            return (
                <div>
                  <input type="text" onChange={this.textInput}></input>
                  <button onClick={this.search}>search</button>
                  <div className="results">
                      <div>
                        Search for a TV series
                        <ul>
                            {seriesArrayTitles.map(item=> (
                                <li key={item.imdbID} className={item.imdbID} onClick={() => this.seasonsList(item.imdbID)}>{item.Title}</li> )
                            )}
                        </ul>
                      </div>
                  </div>
                </div>
              );
        }
        else if (this.state.screenType === 'seriesList'){
            return (
            <div>
                <h4>Seasons:</h4>
                {seasons.map(season => {
            return <span key={season} onClick={() => this.graphList(season)}> {season} </span>;
            })}

            </div>
            )
        }
        else if (this.state.screenType === 'graph'){
            return (
                <div className="chart-container">
                <Chart />
                </div>
            )
        }

    }
}

0 个答案:

没有答案