您需要使用ResponsiveContainer才能使其工作。此外，使用不带**括号的百分比值。

<ResponsiveContainer width="95%" height={400}>
   // your chart
</ResponsiveContainer>

字符串
我用过了，效果很好！：）
来源：Responsive Container Docs

您可以使用recharts提供的ResponsiveContainer。
ResponsiveContainer的Docs说：
一个容器组件，使图表适应父容器的大小。其中一个 prop 宽度和高度应该是百分比字符串。
下面是工作代码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);

字符串
以下是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;
}

型

如果希望两个维度都缩放，只需使用aspect属性即可

<ResponsiveContainer aspect={1.2}>
   // chart with width = 1.2 height
</ResponsiveContainer>

<ResponsiveContainer aspect={0.8}>
   // chart with width = 0.8 height
</ResponsiveContainer>

字符串
在这种情况下，高度/宽度将是父容器的100%。

用div将条形图换行。

<div style={{ position: 'relative', width: '50%', paddingTop: '40%' }}>
  <div style={{ position: 'absolute', height: '100%' }}>
    <BarChart />
  </div>
</div>

字符串
对于外部div：宽度的50%是相对于容器宽度。paddingTop是容器宽度的40%。
对于inner div：height为100%，将占据其整个容器，其高度仅为其paddingTop。

这对我很有效

<ResponsiveContainer width="95%" height={data.length*x}>

字符串
data.length -> y轴上的组件数
x ->要增加的单元格大小（在我的情况下，33工作得很好）

我不想要求特定的长宽比，也不想要求固定其中一个维度，所以我决定通过使用use-react的useMeasure钩子查询父容器的大小和宽度来动态设置图表的高度和宽度。

const [chartRef, chartDimensions] = useMeasure()

return (
  <div ref={chartRef}>
    <LineChart
      width={chartDimensions.width}
      height={chartDimensions.height}
      ...
    >
    {/* chart components here */}
    </LineChart>
  </div>
)

字符串
我希望我的图表总是填充这个div，它可以通过窗口以任何方式调整大小。

给予minWidth和height给ResponsiveContainer Wrapper。* 就这么简单 *

import {ResponsiveContainer} from "recharts";

//make sure to wrap minWidth in {} and not in ""
<ResponsiveContainer minWidth={350} height={350}>
    <BarChart className="barChart" data={data}>
    </BarChart>
 </ResponsiveContainer>

字符串

在Tailwind CSS中使用断点

如果您使用Tailwind CSS，另一种选择是将图表 Package 在ResponsiveContainer组件中，保持height和width属性未设置，并将各种断点传递给className属性。
使用媒体断点的好处是它可以让你根据屏幕大小指定不同的最小高度（或宽度）。rechart提供的ResponsiveContainer在一个方向上的响应性很好，但是在大屏幕上350px的固定高度最终会拉伸图表。
对于那些还没有使用Tailwind CSS的人，这里有关于使用响应断点的文档和关于sizing utility classes的更多信息。

示例组件

下面的例子强调了如何将顺风风格的媒体断点传递给ResponsiveContainer.className属性，这将允许您根据屏幕大小调整图表的大小。

import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";

export interface BarChartProps {
  data: Array<Object>;
  labelKey: string;
  valueKey: string;
}

export function ResponsiveBarChart({ data, labelKey, valueKey }: BarChartProps) {
  return (
    <ResponsiveContainer className="min-h-40 md:min-h-80"> // notice the md: breakpoint
      <BarChart data={data}>
        <XAxis
          dataKey={labelKey}
          stroke="#888888"
          fontSize={12}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="#888888"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `$${value}`}
        />
        <Bar
          dataKey={valueKey}
          fill="currentColor"
          radius={[4, 4, 0, 0]}
          className="fill-primary"
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

字符串

示例用法

下面是一个如何在各种大小的容器中使用此图表组件的示例：

import { ResponsiveBarChart } from "./components/bar-chart"

const data = [
  {
    day: "Monday",
    total: Math.floor(Math.random() * 5000) + 1000,
  },
  {
    day: "Tuesday",
    total: Math.floor(Math.random() * 5000) + 1000,
  },
  {
    day: "Wednesday",
    total: Math.floor(Math.random() * 5000) + 1000,
  },
  {
    day: "Thursday",
    total: Math.floor(Math.random() * 5000) + 1000,
  },
  {
    day: "Friday",
    total: Math.floor(Math.random() * 5000) + 1000,
  },
];

function Dashboard() {
  <section id="dashboard">
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-8">
      <div className="col-span-4 rounded-lg border shadow-sm p-4 pt-6">
        <ResponsiveBarChart
          data={data}
          valueKey={"day"}
          labelKey={"total"}
        />
      </div>
      <div className="col-span-4 rounded-lg border shadow-sm p-4 pt-6">
        <ResponsiveBarChart
          data={data}
          valueKey={"day"}
          labelKey={"total"}
        />
      </div>
    </div>
    <div className="flex rounded-lg border shadow-sm p-4 pt-6">
      <ResponsiveBarChart
        data={data}
        valueKey={"day"}
        labelKey={"total"}
      />
    </div>
  </section>;
}

型

输出示例

由此产生的“ Jmeter 板”在桌面上应该看起来像这样：

的数据
在移动的上是这样的：

的