本文介绍了使用recharts设置响应图表的高度和宽度(条形图)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用recharts来实现BarChart。但是 width = {600}
和 height = {300}
会导致条形图是绝对的,而不是响应。如何使条形图成为响应式的?我尝试使用百分比作为 width = {'50%} height = {40%}
但是没有用。请帮我这个!!
谢谢你!
I am trying to use recharts to implement a BarChart. But the width={600}
and height={300}
causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one?? I Tried using percentage as width={'50%"} height={"40%"}
but didnot work. Please help me with this !!Thank you !!
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
<BarChart className="barChart" width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}} label="heaf">
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="occupied" barSize={10} fill="#05386b" />
<Bar dataKey="available" barSize={10} fill="#fdaa00" />
<Bar dataKey="cleaning" barSize={10} fill="#379583" />
<Bar dataKey="reserved" barSize={10} fill="#c60505" />
</BarChart>
推荐答案
您可以使用 ResponsiveContainer
由 recharts
提供。
ResponsiveContainer
说:
以下是来自。尝试调整输出窗口宽度的大小:
Here is the code from jsfiddle. Try resizing the output window width:
const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} = Recharts;
const data = [
{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},
];
const SimpleAreaChart = React.createClass({
render () {
return (
<ResponsiveContainer>
<BarChart data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
</ResponsiveContainer>
);
}
})
ReactDOM.render(
<SimpleAreaChart />,
document.getElementById('container')
);
这是容器的css
:
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 400px;
background-color: #fff;
}
这篇关于使用recharts设置响应图表的高度和宽度(条形图)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!