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 =＆＃34; expand＆＃34;属性。

如何根据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>
    );
  }
}

Recharts - 标准化堆积条形图

1 个答案: