图表-条形图动态标签位置

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')
);