图不显示

Question

我的图形组件：我正在从 firebase 获取数据点并使用它们绘制图表。

import React, {useState, useEffect}  from 'react';
import app from "./firebase";
import firebase from "firebase/app";
import "firebase/database";
import { useTheme } from '@material-ui/core/styles';
import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts';
import Title from './Title';

export default function Chart() {
  const theme = useTheme();
  const [chamberData, setChamberData] = useState(()=>{
    return 0
  })

  useEffect(() => {
    const chamberListen = firebase.database().ref('Chamber1');
    
    chamberListen.on("value", (snapshot) => {
     var chambers = [];
     
     var mq2Values=[],mq2Fetch, mq2Points = [], mq2Timestamp=[], plotPoints=[]
       var chamberKey = snapshot.key;
       var chamberData = snapshot.val();
       var result

       chambers.push({chamberKey, chamberData})
       console.log(chambers);
       
       mq2Fetch = Object.values(chamberData.room.mq2)
       console.log(mq2Fetch)
      
       
       //Mq2 Values Array
      mq2Fetch.forEach((object)=>{
        mq2Values.push(object.value)
      })
      console.log(mq2Values)

      // Mq2 Timestamp Array
      mq2Fetch.forEach((object)=> {
        mq2Timestamp.push(object.timestamp.toString().split(' ')[4])
        
      })
      console.log(mq2Timestamp)

       

       result =  mq2Values.reduce(function(result, field, index) {
         result[mq2Timestamp[index]] = field;
         return result;
       }, {})
       console.log(result)
       
       
       Array(result).forEach((object)=>{
         
         console.log(object.key)
       })
       
       mq2Fetch.forEach((object)=>{
        plotPoints.push(createData(object.timestamp.toString().split(' ')[4], object.value))
       })
       console.log(plotPoints)
       setChamberData(plotPoints)
 })
      



  },[])


  return (
    <React.Fragment>
      <Title>Today</Title>
      
      <ResponsiveContainer>
        <LineChart
          data={chamberData}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              Mq2
            </Label>
          </YAxis>
          <Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </React.Fragment>
  );
}

当我在另一个组件中使用它时，我只能看到标题而不是图表本身。我尝试在功能组件和 class 组件中使用它，但结果是一样的。这是我在 class 组件中使用它的方式。

import React, { Component } from 'react'
import Chart from './Graph'
import Container from '@material-ui/core/Container';

export default class GraphTest extends Component {
    render() {
        return (
            <div>
                <Container>
                    <Chart />
                </Container>
            </div>
        )
    }
}

Answer 1

尝试将 width 和 height 设置为明确的值，例如：

<LineChart width={500} height={300} ...

图不显示

Graph does not show up

reactjs

firebase-realtime-database

recharts