重新绘制折线图未呈现

问题描述

我在我的项目中使用 recharts 库，我试图显示文档中的 example，但我很难让它工作， 我正在使用反应功能组件，我正在从父组件发送数据：

<LineChartPastYears data={exampleData}></LineChartPastYears>
      

我的 LineChartPastYears 组件，应该呈现图表，但由于我无法理解的原因没有显示它：

import React,{useState,useEffect} from 'react'

import {
  LineChart,Line,XAxis,YAxis,Cartesiangrid,Tooltip,Legend,ResponsiveContainer,} from 'recharts'

const LineChartPastYears = data => {
  const [newData,setNewData] = useState([])
  console.log(data)
  useEffect(() => {
    setNewData(data.data)
  },[data])
  return (
    <div>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={newData}
          margin={{
            top: 5,right: 30,left: 20,bottom: 5,}}
        >
          <Cartesiangrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey="pv"
            stroke="#8884d8"
            activeDot={{r: 8}}
          />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
export default LineChartPastYears

函数声明后的console.log显示正确到达组件的数据，

我发送的数据是

const exampleData = [
    {
      name: 'Page A',uv: 4000,pv: 2400,amt: 2400,},{
      name: 'Page B',uv: 3000,pv: 1398,amt: 2210,{
      name: 'Page C',uv: 2000,pv: 9800,amt: 2290,{
      name: 'Page D',uv: 2780,pv: 3908,amt: 2000,{
      name: 'Page E',uv: 1890,pv: 4800,amt: 2181,{
      name: 'Page F',uv: 2390,pv: 3800,amt: 2500,{
      name: 'Page G',uv: 3490,pv: 4300,amt: 2100,]

有人遇到过同样的问题吗？

解决方法

好吧，我终于找到了图表的问题，我会发布它以防其他人遇到同样的问题，基本上你必须在responsiveContainer中指定属性'aspect'而不是高度：

<ResponsiveContainer width="100%" aspect={3}>