Почему In Barchart не показывает Yaxis, а также не показывает все ярлыки для Xaxis в recharts? - PullRequest
Новая
       21

Почему In Barchart не показывает Yaxis, а также не показывает все ярлыки для Xaxis в recharts?

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

Проблема:

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

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 & 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. enter image description here. Может кто-нибудь помочь мне решить эту проблему?

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

enter image description here

1 Ответ

0 голосов
/ 17 апреля 2019

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

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

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

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

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

...