响应式重图表

Question

我试着练习使用重图表，并用条形图创建直方图。这似乎是工作，但我有困难的反应，在手机上。这是我的代码：

import React from 'react';
import clsx from 'clsx';

import { BarChart, Bar, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from "recharts";

import { Card, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    margin: '20px 30px',
    marginBottom: '50px',
    padding: '20px 20px'
  },
  barChart: {
    border: '2px solid red',
    display: 'flex',
    justifyContent: 'center'
  },
  barChartbis: {
    border: '2px solid pink',
  }
}));

const Test = ({className, staticContext, ...rest}) => {
  const classes = useStyles();
  const data = [
    { name: "1", consoles: 200 },
    { name: "2", consoles: 150 },
    { name: "3", consoles: 100 },
    { name: "4", consoles: 50 },
  ];

  return (
        <Card
          className={classes.root}
          elevation={2}
          {...rest}
        >
          <div className={classes.barChart}>
           <BarChart className={classes.barChartbis}
            width={600}
            height={400}
            data={data}
            margin={{
              top: 20,
              right: 20,
              left: 20,
              bottom: 20
            }}
            barSize={20}
          >
            <XAxis
              tick={{ fontSize: '0.9em' }}
              padding={{ left: 10, right: 10 }}
              dataKey="name"
            />
            <YAxis />
            <Tooltip />
            <Legend />
            <CartesianGrid strokeDasharray="3 3" />
            <Bar dataKey="consoles" fill="var(--blue-color)" background={{ fill: "#eee" }} />
          </BarChart>
        </div>
        </Card>
  )
}

export default Test;

以下是截图的一些结果

​

​

​

​

我想这个问题出在BarChart上，但是我不能更改宽度和高度

Answer 1

要使用recharts创建响应图表，您只需将选定的图表放入recharts提供的ResponsiveContainer组件中，如下所示：

<ResponsiveContainer width={700} height="80%">
  <AreaChart data={data} margin={{ top: 20, right: 30, left: 0, bottom: 0 }}> // <-- A random chart from recharts
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" />
    <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  </AreaChart>
</ResponsiveContainer>

在ResponsiveContainer属性中，您可以将宽度设置为窗口的百分比，如width='80%'；如果您不希望窗口更改，则设置为静态值。