reactjs - 标签列表未显示在图表中？

Question

问题:

我使用 rechart 创建了一个条形图。我在条形图中使用了 labelList 组件。但它没有显示我的标签。这就是我组织条形图的方式。

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

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

import {
  BarChart,
  Tooltip,
  Bar,
  ResponsiveContainer,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  LabelList
} from "recharts";

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

const data = [
  {
    name: "A",
    uv: 15.64
  },
  {
    name: "B",
    uv: 8.19
  },
  {
    name: "C",
    uv: 6.66
  },
  {
    name: "D",
    uv: 5.9
  },
  {
    name: "E",
    uv: 4.11
  },
  {
    name: "F",
    uv: 3.99
  },
  {
    name: "G",
    uv: 3.64
  },
  {
    name: "H",
    uv: 0.188
  },
  {
    name: "I",
    uv: 0.171
  },
  {
    name: "J",
    uv: 0.15
  }
];

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);
    window.addEventListener("load", this.getDeviceWidth);
  }

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

  render() {
    let yaspect = 5.0;
    let height = 0;
    let t_count = 0;
    let left = 10;
    if (this.props.device >= 1024) {
      height = 55;
      t_count = 2;
      left = -25;
    }

    if (this.props.device >= 1666) {
      yaspect = 7.25;
      height = 90;
      t_count = 3;
      left = 10;
    }

    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 / yaspect}
            >
              <BarChart
                data={data}
                margin={{ top: 5, right: 0, left: left, bottom: 0 }}
              >
                <CartesianGrid vertical={false} />
                <Tooltip content={<CustomTooltip />} />
                <XAxis
                  dataKey="name"
                  type="category"
                  height={height}
                  interval={0}
                  tick={<CustomizedAxisTick />}
                />
                <YAxis tickCount={t_count} tick={<CustomizedYAxisTick />} />
                <Bar dataKey="uv" fill="#8884d8" minPointSize={15}>
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index + 1}`} fill={COLORS[index]} />
                  ))}
                  <LabelList
                    dataKey="uv"
                    position="top"
                    angle="90"
                    content={<CustomizedMostPopularLabel />}
                  />
                </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);

class CustomizedAxisTick extends Component {
  render() {
    const { x, y, payload } = this.props;

    return (
      <g transform={`translate(${x},${y})`}>
        <text
          x={0}
          y={0}
          dy={16}
          textAnchor="end"
          fill="#666"
          transform="rotate(-35)"
          className="customized-axis-tick-text"
        >
          {payload.value}
        </text>
      </g>
    );
  }
}

class CustomizedYAxisTick extends Component {
  render() {
    const { x, y, payload } = this.props;

    return (
      <g transform={`translate(${x},${y})`}>
        <text x={-22} y={y - 8} className="customized-y-axis-tick-text">
          {`${payload.value}M`}
        </text>
      </g>
    );
  }
}

const CustomTooltip = ({ active, payload, label }) => {
  if (active) {
    return (
      <div className="most-popular-ten-channel-tooltip">
        <p className="most-popular-ten-channel-tooltip-title">{label}</p>
        <p className="most-popular-ten-channel-tooltip-label">{`Channel :   ${label}`}</p>
        <p className="most-popular-ten-channel-tooltip-intro">
          {`Hits : ${payload[0].value} M`}
        </p>
      </div>
    );
  }

  return null;
};

const CustomizedMostPopularLabel =(props) =>{
  const { x, y, value } = props;
  return (
    <div>{`${value} k`}</div>
  )
}

我尝试了很多方法来解决我的问题。但是我无法找到任何好的解决方案来解决我的问题。有人可以帮我解决我的问题吗？谢谢你。

Answer 1

当你声明你的 Bar 时，添加 Prop isAnimationActive并将其设置为 false ， 像这样:

<Bar isAnimationActive={false} dataKey="uv" fill="#8884d8" minPointSize={15}>
   {data.map((entry, index) => (
     <Cell key={`cell-${index + 1}`} fill={COLORS[index]} />
   ))}
   <LabelList
     dataKey="uv"
     position="top"
     angle="90"
     content={<CustomizedMostPopularLabel />}
   />
</Bar>