使用recharts设置响应图表的高度和宽度（条形图） [英] Set height and width for responsive chart using recharts ( Barchart )

问题描述

我正在尝试使用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 说：

使图表适应父容器大小的容器组件。其中一个道具宽度和高度应为百分比字符串。

A container component to make charts adapt to the size of the parent container. One of the props width and height should be a percentage string.

以下是来自的jsfiddle 。尝试调整输出窗口宽度的大小：

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设置响应图表的高度和宽度（条形图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！