Установите высоту и ширину для адаптивной диаграммы с помощью повторных диаграмм (гистограмма)

Я пытаюсь использовать повторные диаграммы для реализации 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>

reactjs javascript material-ui css recharts
person Shrawan BK    schedule 02.09.2018    source источник

Ответы (3)


arrow_upward
39
arrow_downward

Вам нужно использовать ResponsiveContainer, чтобы он работал. Также используйте процентные значения без скобок.

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

Я использовал это, и он работал отлично! :)

Источник: Документы по адаптивному контейнеру

person Saulo Joab    schedule 24.04.2019
comment
Я попытался указать высоту в%, но это не сработало. И тебе того же ? - person Eagle1; 21.03.2020

arrow_upward
18
arrow_downward

Вы можете использовать ResponsiveContainer, предоставленный recharts.

В Документах из ResponsiveContainer говорится:

Компонент контейнера, позволяющий адаптировать диаграммы к размеру родительского контейнера. Одна из ширины и высоты реквизита должна быть строкой в ​​процентах.

Вот рабочий код 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);

Вот 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;
}
person Murli Prajapati    schedule 02.09.2018
comment
Как я могу это сделать при использовании компонента на основе класса - person dwp; 14.03.2019

arrow_upward
0
arrow_downward

Оберните гистограмму 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.

person vijayst    schedule 02.09.2018