绘制自定义标签 [英] Recharts custom label

问题描述

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

Custom label for React Recharts not working with Bar chart.

http://jsfiddle.net/xpko4e7e/

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

期望在所有条形上方看到标签文本。

Expected to see the 'Label' text over of all bars.

推荐答案

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

instead of returning a div try returning a text SVG element

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/

like I have done here, http://jsfiddle.net/CharukaK/6u08o2oa/1/

这篇关于绘制自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！