Javascript 使用recharts(条形图)设置响应图表的高度和宽度
我正在尝试使用recharts实现条形图。但是Javascript 使用recharts(条形图)设置响应图表的高度和宽度,javascript,css,reactjs,material-ui,recharts,Javascript,Css,Reactjs,Material Ui,Recharts,我正在尝试使用recharts实现条形图。但是width={600}和height={300}导致条形图是绝对的,没有响应。如何使柱状图具有响应性?我尝试使用百分比作为width={'50%“}height={'40%“},但不起作用 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; <BarChart className="barChart" width={6
width={600}
和height={300}
导致条形图是绝对的,没有响应。如何使柱状图具有响应性?我尝试使用百分比作为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>
从'recharts'导入{BarChart、Bar、XAxis、YAxis、CartesianGrid、工具提示、图例};
用div将条形图包装起来
<div style={{ position: 'relative', width: '50%', paddingTop: '40%' }}>
<div style={{ position: 'absolute', height: '100%' }}>
<BarChart />
</div>
</div>
对于外部分区:50%的宽度与容器宽度有关。paddingTop是容器宽度的40%
对于内部分区:100%的高度将占用其整个容器,其高度仅为其填充顶部。您可以使用
recharts
提供的ResponsiveContainer
响应容器的上写着:
使图表适应父容器大小的容器组件。其中一个支柱宽度和高度应为百分比字符串
以下是工作代码。请尝试调整输出窗口宽度的大小:
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);
您需要使用
ResponsiveContainer
使其工作。此外,使用不带括号的百分比值
//你的图表
我用了它,效果很好!:)来源:当使用基于类的组件时,我该如何处理它?我试图将高度设置为%,但它不起作用。对您来说也是这样吗?
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 400px;
background-color: #fff;
}