Блог

Я использую библиотеку recharts в своем проекте, я пытаюсь отобразить пример из документации, но мне трудно заставить его работать, я использую функциональный компонент react и отправляю данные из родительского компонента:

 <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
 

консоль.журнал после объявления функции показывает, что данные правильно поступают в компонент,

данные, которые я отправляю, являются

 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:

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