Блог

Проблема:

Я создал столбчатую диаграмму с использованием recharts. Здесь я предоставляю свой код.

 import React, { Component, PureComponent } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  Card,
  CardBody,
  CardTitle,
  CardFooter,
  CardSubtitle
} from "reactstrap";
import {
  BarChart,
  Tooltip,
  Bar,
  Legend,
  ResponsiveContainer,
  Cell,
  XAxis,
  YAxis
} from "recharts";

import "./MostPopularTenChannels.css";
import { get_device_width } from "../../../actions";

const data = [
  {
    name: "Page A",
    uv: 15640
  },
  {
    name: "Page B",
    uv: 8190
  },
  {
    name: "Page C",
    uv: 6660
  },
  {
    name: "Page D",
    uv:590
  },
  {
    name: "Page E",
    uv: 411
  },
  {
    name: "Page F",
    uv: 399
  },
  {
    name: "Page G",
    uv: 364
  },
  {
    name: "Page G",
    uv: 188
  },
  {
    name: "Page G",
    uv: 171
  },
  {
    name: "Page G",
    uv: 150
  }
];

const COLORS = [
  "#26a0a7",
  "#c5e587",
  "#cdd477",
  "#d2cb6e",
  "#ddb559",
  "#ddb458",
  "#dfb054",
  "#e99c41",
  "#ea9a3f",
  "#ec983d"
];

class MostPopularTenChannel extends Component {
  constructor(props) {
    super(props);

    this.getDeviceWidth = this.getDeviceWidth.bind(this);
  }

  componentDidMount() {
    this.getDeviceWidth();
    window.addEventListener("resize", this.getDeviceWidth);
  }

  getDeviceWidth() {
    this.props.get_device_width();
  }

  render() {
    return (
      <div>
        <Card className="most-popular-ten-channel-card">
          <CardTitle className="most-popular-ten-channel-card-title">
            Most Popular Ten Channels
          </CardTitle>
          <CardSubtitle className="most-popular-ten-channel-card-subtitle">
            Hits amp; subscribers
          </CardSubtitle>
          <CardBody>
            <ResponsiveContainer width="100%" height="100%" aspect={5.0 / 5.0}>
              <BarChart data={data}>
                <Tooltip />
                <XAxis dataKey="name" type="category" />
                <YAxis />
                <Bar dataKey="uv" fill="#8884d8">
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index   1}`} fill={COLORS[index]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
            <CardFooter className="most-popular-ten-channel-card-footer">
              <div>Hits and subscribers in the Y-axis</div>
            </CardFooter>
          </CardBody>
        </Card>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ get_device_width }, dispatch);
}

function mapStateToProps(state) {
  return {
    device: state.device
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MostPopularTenChannel);

const YCoustmizeLabel = () => {
  return <div>hii</div>;
};
  

Но проблема в том, что не отображается ось Y, а также не отображаются все метки для оси xAxis.. Может ли кто-нибудь помочь мне решить эту проблему?

И также я хочу узнать об этом, могу ли я пометить yaxis следующим образом.

Чтобы обозначить ось Y так, как вы хотите, вы можете использовать prop под названием «tickFormatter» и отформатировать метки по оси Y, которые вы можете найти в документации здесь:http://recharts.org/en-US/api/YAxis#tickFormatter <— tick formatter для форматирования

Вы можете сделать что-то вроде…

tickFormatter={(tickValue) => `${tickValue}M`}

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

Причина, по которой я упоминаю об этом, заключается в том, что в моем случае галочки исчезли и были обрезаны, когда я использовал aspect в ResponsiveContainer.

По оси X добавление двух параметров сработало бы. Вот что сработало для меня:

 <XAxis dataKey="name" textAnchor= "end" sclaeToFit="true" verticalAnchor= "start"  interval={0} angle= "-40" stroke="#8884d8" />