我正在使用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>
)
}
}
}