响应式图表

问题描述

我尝试使用重新图表练习并使用条形图创建直方图。它似乎有效，但我在移动响应方面遇到困难。这是我的代码：

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 上，但我无法更改宽度和高度

解决方法

要使用 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%' 或静态值（如果您根本不希望它改变）。>