为什么在 Barchart 中没有显示 Yaxis，也没有在 recharts 中显示 Xaxis 的所有标签？答案

【问题标题】：Why In Barchart is not showing Yaxis and also not showing all the labels for Xaxis in recharts?为什么在 Barchart 中没有显示 Yaxis，也没有在 recharts 中显示 Xaxis 的所有标签？
【发布时间】：2019-03-28 07:14:21
【问题描述】：

问题：

我使用 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 & 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。

【问题讨论】：

使用c3 library。它很容易定制。

标签： reactjs recharts

【解决方案1】：

要根据需要标记 Y 轴，您可以使用名为“tickFormatter”的道具并格式化 Y 轴刻度标签，您可以在此处的文档中找到这些标签： http://recharts.org/en-US/api/YAxis#tickFormatter

你可以做类似...

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

在查看可能导致刻度消失的代码时，想到的一件事是 ResponsiveContainer 中的 aspect 属性。

之所以提到这一点是因为在我的情况下，当我在 ResponsiveContainer 中使用方面时，刻度消失并被切断。

【讨论】：

【解决方案2】：

在 X 轴上添加两个参数会起作用。这对我有用：

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

【讨论】：