javascript 使用 recharts ( Barchart ) 设置响应式图表的高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52134350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height and width for responsive chart using recharts ( Barchart )
提问by Shrawan BK
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 did not work.
我正在尝试使用 recharts 来实现 BarChart。但是width={600}andheight={300}导致 Barchart 是绝对的，没有响应。如何使条形图具有响应性？我尝试使用百分比作为width={'50%"} height={"40%"}但没有奏效。
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>
回答by Saulo Joab
You need to use ResponsiveContainerfor it to work. Also, use the percentage values withoutbrackets.
你需要使用ResponsiveContainer它才能工作。此外，请使用不带括号的百分比值。
<ResponsiveContainer width="95%" height={400}>
// your chart
</ResponsiveContainer>
I used that and it worked just fine! :)
Source: Responsive Container Docs
我用过它，效果很好！:)
来源：响应式容器文档
回答by Murli Prajapati
You can use ResponsiveContainerprovided by recharts.
您可以使用ResponsiveContainer所提供的recharts。
Docsof ResponsiveContainersays:
文件中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.
使图表适应父容器大小的容器组件。道具宽度和高度之一应该是百分比字符串。
Here is the working code https://codesandbox.io/s/react-recharts-responsive-stack-overflow-863bi. Try resizing the output window width:
这是工作代码https://codesandbox.io/s/react-recharts-responsive-stack-overflow-863bi。尝试调整输出窗口的宽度：
import React from "react";
import ReactDOM from "react-dom";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer
} from "recharts";
import "./styles.css";
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 = () => {
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>
);
};
const rootElement = document.getElementById("container");
ReactDOM.render(<SimpleAreaChart />, rootElement);
Here is the css of container:
这是 css 的container：
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 400px;
background-color: #fff;
}
回答by vijayst
Wrap the bar chart with divs.
用 div 包裹条形图。
<div style={{ position: 'relative', width: '50%', paddingTop: '40%' }}>
<div style={{ position: 'absolute', height: '100%' }}>
<BarChart />
</div>
</div>
for outer div: width of 50% is with respect to the container width. paddingTop is 40% of the container width.
对于外部 div：50% 的宽度是相对于容器宽度的。paddingTop 是容器宽度的 40%。
for inner div: height of 100% will occupy its entire container whose height is only its paddingTop.
对于内部 div：高度为 100% 将占据其整个容器，其高度仅为其 paddingTop。
