javascript - Recharts - 标准化堆积条形图

Question

我对 React 和 Recharts 都很陌生，而且我正面临着一些困境。我做了很多阅读，但似乎找不到我要找的东西，所以我希望我能在这里得到一些帮助。

我有一个数据集，其中包含一个包含已完成、失败和正在进行状态的进程列表，我想显示一个堆叠条形图，但将它们标准化——即它们都需要具有相同的宽度。我设法让它大部分工作，但在条形图上显示值被证明是一种痛苦。

下面是我的代码：

export default class DashboardView extends React.Component<IDashboardView, {}>{
render() {
    const { dashboard, onDashboardItemClick } = this.props;

    const data = [
        {name: 'NE Send', completed: 230, failed: 335, inprogress: 453},
        {name: 'NE Resend', completed: 335, failed: 330, inprogress: 345},
        {name: 'Miles Orchestrator', completed: 537, failed: 243, inprogress: 2110},
        {name: 'Commissions Payment Orch', completed: 132, failed: 328, inprogress: 540},
        {name: 'Business Integrators', completed: 530, failed: 145, inprogress: 335},
        {name: 'SmartTrack', completed: 538, failed: 312, inprogress: 110}
    ];

    const CustomizedLabel = React.createClass({
        render () {
            const {x, y, value, dataKey} = this.props;                
            const fullValue =  value; //(value[1] - value[0]);
            return <text x={x-20}  y={y+5}  dy={0} fontSize='12' fill="#FFFFFF" fontWeight="Bold" textAnchor="start">{fullValue}</text>
        }
    });
    
    return (
        <div className="content c-white">
            <h1>Dashboard</h1>
            <ResponsiveContainer height={250} width={'100%'}>
                <BarChart layout="vertical" data={data} margin={{left: 50, right: 50}} stackOffset="expand">
                    <XAxis hide type="number"/>
                    <YAxis type="category" dataKey="name" stroke="#FFFFFF" fontSize="12" />
                    <Tooltip/>
                    <Bar dataKey="failed" fill="#dd7876" stackId="a" label={<CustomizedLabel />} />
                    <Bar dataKey="completed" fill="#82ba7f" stackId="a" label={<CustomizedLabel/>} />
                    <Bar dataKey="inprogress" fill="#76a8dd" stackId="a" label={<CustomizedLabel/>} />
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
}
}

结果是这样的： 如您所见，这些数字是……嗯……奇数，只有当我添加 stackOffset="expand" 属性时才会发生这种情况。

如何将部分的实际值获取到我的标签，而不是基于 stackOffset 的计算值？我显示的值是两个值的数组，我尝试对这些值进行一些操作但没有成功。

任何帮助都感激不尽。

Answer 1

我知道这是一个老问题，但由于它有 3k 视图且没有答案，我会尝试回答

我认为作者想得到这个结果： https ://codesandbox.io/s/vigilant-lehmann-82dzz

import React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  ResponsiveContainer,
  Tooltip,
  Label,
  LabelList
} from "recharts";

const renderCustomizedLabel = (props) => {
  const { content, ...rest } = props;

  return <Label {...rest} fontSize="12" fill="#FFFFFF" fontWeight="Bold" />;
};

export class DashboardView extends React.Component {
  render() {
    const data = [
      { name: "NE Send", completed: 230, failed: 335, inprogress: 453 },
      { name: "NE Resend", completed: 335, failed: 330, inprogress: 345 },
      {
        name: "Miles Orchestrator",
        completed: 537,
        failed: 243,
        inprogress: 2110
      },
      {
        name: "Commissions Payment Orch",
        completed: 132,
        failed: 328,
        inprogress: 540
      },
      {
        name: "Business Integrators",
        completed: 530,
        failed: 145,
        inprogress: 335
      },
      { name: "SmartTrack", completed: 538, failed: 312, inprogress: 110 }
    ];

    return (
      <div className="content c-white">
        <h1>Dashboard</h1>
        <ResponsiveContainer height={250} width={"100%"}>
          <BarChart
            layout="vertical"
            data={data}
            margin={{ left: 50, right: 50 }}
            stackOffset="expand"
          >
            <XAxis hide type="number" />
            <YAxis
              type="category"
              dataKey="name"
              stroke="#FFFFFF"
              fontSize="12"
            />
            <Tooltip />
            <Bar dataKey="failed" fill="#dd7876" stackId="a">
              <LabelList
                dataKey="failed"
                position="center"
                content={renderCustomizedLabel}
              />
            </Bar>
            <Bar dataKey="completed" fill="#82ba7f" stackId="a">
              <LabelList
                dataKey="completed"
                position="center"
                content={renderCustomizedLabel}
              />
            </Bar>
            <Bar dataKey="inprogress" fill="#76a8dd" stackId="a">
              <LabelList
                dataKey="inprogress"
                position="center"
                content={renderCustomizedLabel}
              />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    );
  }
}