在react谷歌图表中绘制数据

Question

我有一个JSON，它是：

{
   "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 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”未定义为no-undef

如何绘制temp_min？

Answer 1

您尝试访问一个不存在的变量(weather未在此作用域中声明）。如果我正确理解您的意图，您可以尝试将所有temp_min绘制在图表中，也可以在数组上进行投影。

更新：

根据文档，您需要提供代表一个数据点的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>