recharts 折线图不呈现
recharts Line chart not rendering
我在我的项目中使用 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,
},
]
有没有人遇到同样的问题?
好吧,终于我找到了图表的问题所在,我会 post 它以防其他人遇到同样的问题,基本上你必须指定 属性 'aspect' 而不是 responsiveContainer 中的高度:
<ResponsiveContainer width="100%" aspect={3}>
我在我的项目中使用 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,
},
]
有没有人遇到同样的问题?
好吧,终于我找到了图表的问题所在,我会 post 它以防其他人遇到同样的问题,基本上你必须指定 属性 'aspect' 而不是 responsiveContainer 中的高度:
<ResponsiveContainer width="100%" aspect={3}>