Question

问题：

我正在创建一个仪表板，在其中显示条形图。我想使其具有响应性，并且我想为条形图添加不同的颜色。

这是我正在使用条形图的组件。

import React, { Component } from "react";
import { BarChart, Tooltip, Bar, Legend, ResponsiveContainer } from "recharts";

import { Card, CardTitle, CardBody } from "reactstrap";

import "./SessionDuration.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
  }
];

class SessionDuration extends Component {
  render() {
    return (
      <Card className="session-duration-card">
        <CardTitle className="session-duration-card-header">
          Session Duration
        </CardTitle>
        <CardBody>
          <ResponsiveContainer>
            <BarChart
              width={130}
              height={150}
              data={data}
              margin={{
                top: 20,
                right: 20,
                left: -1,
                bottom: 5
              }}
            >
              <Tooltip />

              <Bar dataKey="pv" fill="#8884d8" />
            </BarChart>
          </ResponsiveContainer>
        </CardBody>
      </Card>
    );
  }
}

export default SessionDuration;

有人可以通过修改我的代码来为我提供帮助，以便为每个条形显示不同的颜色，还可以基于设备（例如使用媒体查询）提供样式以使其具有响应性吗？谢谢。

我在堆栈溢出中发现了类似的问题，但这不是我想使用类基础组件的类基础组件。

如何使用图表创建带有反应的响应图？

0 个答案: