reactjs - 重新绘制自定义标签

Question

React Recharts 的自定义标签不适用于条形图。

http://jsfiddle.net/xpko4e7e/

 <Bar dataKey="pv"  fill="#8884d8"  label={<CustomLabel/>} />

预计会在所有栏上看到“标签”文本。

更新
例如，如果我有一个图表，其中有多条线，并且每条线都有一些标签，但在渲染时，某些值高于另一个值。如何克服这个问题？

Image Preview

Answer 1

尝试返回文本 SVG 元素，而不是返回 div

const CustomizedLabel = React.createClass({
  render () {
    const {x, y, stroke, value} = this.props;
		
   	return <text x={x} y={y} dy={-4} fill={stroke} fontSize={10} textAnchor="middle">{value}</text>
  }
});

然后添加

<Bar dataKey="pv"  fill="#8884d8"  label={customLabel} />

就像我在这里所做的那样，http://jsfiddle.net/CharukaK/6u08o2oa/1/