Как создать адаптивный график с реагированием с использованием перезарядок? - PullRequest
Новая
       24

Как создать адаптивный график с реагированием с использованием перезарядок?

0 голосов
/ 13 марта 2019

Проблема:

Я создаю информационную панель в реакции, там я показываю гистограмму.Я хочу сделать его отзывчивым, а также хочу добавить разные цвета для баров.

Это мой компонент, в котором я использую гистограммы. 

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;

Может ли кто-нибудь помочь мне, изменив мой код, чтобы дать разный цвет для каждой полосы, а также дать основу для стиля наустройства с (например, с использованием медиа-запроса), чтобы сделать его отзывчивым ?.Спасибо.

Я нашел похожий вопрос, подобный этому, в переполнении стека, но это не базовый компонент класса, я хочу сделать это с базовым компонентом класса.

вопрос похож насделать отзывчивым

...