问题描述
example_data %>%
ggplot(aes(x = make,y = value,color = name,group = name)) +
geom_line() +
geom_point() +
coord_flip() +
ylab("EI1 (Expected Influence with Neighbor)") +
xlab("Variables")
我正在使用{
"cod":"200","message":0,"cnt":40,"list":[
{
"dt":1601024400,"main":{
"temp":301.11,"feels_like":301.34,"temp_min":301.11,"temp_max":301.2,"pressure":1010,"sea_level":1010,"grnd_level":907,"humidity":58,"temp_kf":-0.09
},"weather":[
{
"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"
}
],"clouds":{
"all":68
},"wind":{
"speed":4.24,"deg":238
},"visibility":10000,"pop":0.25,"sys":{
"pod":"d"
},"dt_txt":"2020-09-25 09:00:00"
}
]
}
钩来提取数据。
useAsync import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography'
// Chart
import Chart from "react-google-charts";
// async
import { useAsync } from 'react-async';
const loadUsers = async () =>
await fetch("http://api.openweathermap.org/data/2.5/forecast?q=bengaluru&appid={API_KEY}")
.then(res => (res.ok ? res : Promise.reject(res)))
.then(res => res.json())
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,padding: theme.spacing(5)
},paper: {
padding: theme.spacing(2),textAlign: 'left',color: theme.palette.text.secondary,},}));
export default function Dashboard() {
const { data,error,isLoading } = useAsync(
{
promiseFn: loadUsers
}
)
const classes = useStyles();
if (isLoading) return "Loading..."
if (error) return `Something went wrong: ${error.message}`
console.log("Data is",data)
if (data)
return (
<div className="container">
<div className="App">
<h2>Weather Details</h2>
</div>
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={4}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textFirst" gutterBottom>
Temparature Data:
</Typography>
<Typography variant="body2" component="p">
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={4}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textFirst" gutterBottom>
Pressure Data:
</Typography>
<Typography variant="body2" component="p">
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={4}>
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textFirst" gutterBottom>
Wind Data:
</Typography>
<Typography variant="body2" component="p">
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</div>
{data.list.map((weather,index) => (
<div key={index} className="row">
<div className="col-md-12">
<p>{weather.main.temp_min}</p>
<p>{weather.main.temp_max}</p>
</div>
</div>
))}
</div>
)
}
和temp_min被成功提取。
但是，当我将temp_max代码修改为
card我收到此错误：
“天气”未定义为no-undef
如何绘制<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textFirst" gutterBottom>
Temparature Data:
</Typography>
<Typography variant="body2" component="p">
<Chart
chartType="BarChart"
data = {
weather.main.temp_min
}
/>
</Typography>
</CardContent>
</Card>
？
解决方法
您尝试访问一个不存在的变量（在此范围内未声明weather）。如果我理解您的意图正确，那么您尝试在图表中绘制所有temp_min，在整个数组上绘制projection。
更新：
基于documentation，您需要提供代表一个数据点的x和y值对。数据数组的第一个值对必须是图的标头。
const mapped = data.list.map(d => [new Date(d.dt),d.main.temp_min]);
const chartData = [["Time","Temperature"],...mapped];
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography className={classes.title} color="textFirst" gutterBottom>
Temparature Data:
</Typography>
<Typography variant="body2" component="p">
<Chart
chartType="BarChart"
data={chartData}
/>
</Typography>
</CardContent>
</Card>