使用 recharts ( Barchart ) 为响应式图表设置高度和宽度

Posted 2023-02-22

【中文标题】使用 recharts ( Barchart ) 为响应式图表设置高度和宽度

【英文标题】：Set height and width for responsive chart using recharts ( Barchart )

【发布时间】：2019-02-07 14:26:33

【问题描述】：

我正在尝试使用 recharts 来实现 BarChart。但是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>

【参考方案1】：

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

<ResponsiveContainer  height=400>
   // your chart
</ResponsiveContainer>

我用过，效果很好！ :) 来源：Responsive Container Docs

【讨论】：

我尝试将高度设置为 %，但它不起作用。你也一样？

【参考方案2】：

您可以使用recharts提供的ResponsiveContainer。

ResponsiveContainer 的Docs 说：

使图表适应父容器大小的容器组件。道具宽度和高度之一应该是百分比字符串。

这是工作代码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;

【讨论】：

在使用基于类的组件时如何做到这一点

【参考方案3】：

用 div 包裹条形图。

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

对于外部 div：50% 的宽度是相对于容器宽度而言的。 paddingTop 是容器宽度的 40%。

对于内部 div：高度为 100% 将占据其高度仅为其 paddingTop 的整个容器。