Recharts

Question

我怎样才能拥有如图所示的动态条形图位置？

这是我目前的代码

const data = [
        { currency: 'CHF', amount: 3, amountLabel: 3023.00 },
        { currency: 'GBP', amount: 6, amountLabel: 6275.00 },
        { currency: 'USD', amount: 10, amountLabel: 9999.00 },
        { currency: 'EUR', amount: 14, amountLabel: 14819.00 },
        { currency: 'LEK', amount: 24, amountLabel: 24023000.00 },
    ];    
<BarChart
    width={430}
    height={170}
    data={data}
    layout="vertical">
    <XAxis type="number" orientation="top" stroke="#285A64" />
    <YAxis type="category" dataKey="currency" axisLine={false} dx={-5} tickLine={false} 
           style={{ fill: "#285A64" }} />
     <Bar background dataKey="amount" fill="#285A64" barSize={{ height: 26 }}>
        <LabelList dataKey="amountLabel" position="insideRight" style={{ fill: "white" }} />
     </Bar>
</BarChart>

在此处查找示例代码jsfiddle

Answer 1

你应该实现一个 React 组件注入到 prop content (LabelList)

例如 (JSFiddle):

const {BarChart, Bar, XAxis, YAxis, LabelList} = Recharts;
 const data = [
        { currency: 'CHF', amount: 3, amountLabel: 3023.00 },
        { currency: 'GBP', amount: 6, amountLabel: 6275.00 },
        { currency: 'USD', amount: 10, amountLabel: 9999.00 },
        { currency: 'EUR', amount: 14, amountLabel: 14819.00 },
        { currency: 'LEK', amount: 26, amountLabel: 26023000.00 },
    ];
    
const renderCustomizedLabel = (props) => {
  const {
    x, y, width, height, value,
  } = props;

const fireOffset = value.toString().length < 5;
const offset = fireOffset ? -40 : 5;
  return (
      <text x={x + width -offset} y={y + height - 5} fill={fireOffset ? "#285A64" :"#fff"} textAnchor="end">
        {value}
      </text>
  );
};

const VerticalBarChart = React.createClass({
    render () {
    return (
        <BarChart
                width={400}
                height={170}
                data={data}
                layout="vertical">
                <XAxis type="number" orientation="top" stroke="#285A64"/>
                <YAxis type="category" dataKey="currency" axisLine={false} dx={-10} tickLine={false} style={{ fill: "#285A64" }} />
                <Bar background dataKey="amount" fill="#285A64" barSize={{ height: 26 }}>
                    <LabelList dataKey="amountLabel" content={renderCustomizedLabel} position="insideRight" style={{ fill: "white" }} />
                </Bar>
            </BarChart>
    );
  }
})

ReactDOM.render(
  <VerticalBarChart />,
  document.getElementById('container')
);

Recharts - 条形图动态标签位置

Recharts - bar chart dynamic label position

reactjs