重新绘制自定义标签

2024-01-30

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

http://jsfiddle.net/xpko4e7e/ http://jsfiddle.net/xpko4e7e/

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

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

Update
例如,如果我有一个图表,其中有多条线,并且每条线都有一些label但在渲染时,某些值高于另一个值。如何克服这个问题?

图像预览 https://i.stack.imgur.com/FOB3L.png


尝试返回文本 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/ http://jsfiddle.net/CharukaK/6u08o2oa/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

重新绘制自定义标签 的相关文章

随机推荐

  • 如何在不关闭当前Firebase会话的情况下创建用户身份验证[重复]

    这个问题在这里已经有答案了 我想创建一个系统 管理员可以从电子邮件创建用户身份验证 我已经按照文档所述进行了开发 但当前会话已关闭 我只想创建身份验证来获取 uid 然后使用我想要存储的数据在数据库中创建一个用户 这就是我所拥有的 var
  • Iframe 是否创建单独的执行上下文?

    我正在用 js 编写一个 html 解析器 它可以处理和操作很多节点 我想分摊开销 这样就不会导致用户界面冻结 我考虑过使用 web Worker 但它没有 DOM 访问权限 所以目前我正在使用setTimeout 0 在我的循环中不冻结
  • Google Translation API id 因请求过多而阻止 IP 地址

    我正在设置一个Django从 API 请求产品数据的视图 使用以下命令解析它们BeautifulSoup 应用googletrans模块并将响应保存到我的 Postgresql 数据库中 昨天一切都工作正常 直到突然 Google 阻止了对
  • 添加到向量时在析构函数内部进行双重释放

    嘿 我正在使用鼓机 并且遇到矢量问题 每个序列都有一个样本列表 并且样本在向量中排序 然而 当样本在向量上被push back时 样本的析构函数被调用 并导致双重释放错误 这是示例创建代码 class XSample public Uint
  • 如何仅使用一个上下文菜单从不同标签复制文本

    我有一个用于联系人列表的 Windows 窗体程序 我已经有一个用于从 DataGridView 复制和粘贴的上下文菜单 但是 我希望能够右键单击标签并从上下文菜单中选择复制以复制该一个标签中的数据 我有 10 个不同的标签 我不需要全部
  • 评估条件表达式

    我有一个场景 我将 if 条件作为字符串保存在数据库中 例如 String condition age gt 28 nationality US OR String condition age gt 28 现在 我想评估用户是否已输入条件句
  • 获取 Google App Engine 发布版本的来源

    我可以从 Google 下载 App Engine 源代码吗 Update Google appengine 现在允许您下载代码 文档在这里 http code google com appengine docs python tools
  • Django OneToOneField - 我应该把它放在哪个模型中?

    假设我们有以下模型 class A Model pass class B Model pass 那么以下之间没有区别 在模型A中 b OneToOneField B related name A name and 在模型 B 中 a One
  • Bitbucket:为什么我无法创建 master/x 分支

    这是在 SourceTree 中完成的 我正在尝试做一些分支 master dev master demo master live 但这不能被推动 例如 当我尝试推动时master demo to master demo然后它给出这个错误
  • Erlang套接字发送超时永远不会发生

    我正在 Erlang 中实现一个与手机客户端通信的 TCP 服务器 手机经常掉线 所以服务器必须能够检测到 因此 我希望服务器向客户端发送消息时设置超时 这样当超时发生时 连接将关闭 客户端将被标记为离线 我在服务器上使用了这个监听选项 c
  • 如何在Python中隐藏/删除继承类中的某些方法?

    I 想要隐藏一些公共方法继承期间class B from class A class A object def someMethodToHide pass def someMethodToShow pass class B A pass l
  • 自动从 DynamoDb 表中删除数据

    DynamoDB 中是否有生命保留期概念 我的意思是有什么办法可以让表中的数据在一段时间后被删除 就像我们可以在 S3 中设置一些保留期一样 Thanks DynamoDB 引入了生存时间 TTL 功能 当您想要删除记录时 您可以创建一个数
  • 将参数从批处理文件传递到 sqlplus 脚本

    我正在尝试获取一个包含我每天运行的一些脚本的用户名和密码的文件 我现在有几个脚本正在使用包含我的用户名和密码的批处理文件 我的密码批处理文件如下所示 参数文件 Rem Oracle Db set odbUsername myUserName
  • 在 Flask api 中编辑传入请求正文有效负载

    我希望使基于 Flask 的 API 对所有传入的有效负载不区分大小写 而不是必须将其应用于所有 api route 函数 我想将其应用于 app before request装饰器 这样对于所有带有 json 有效负载 POST 和 PU
  • 如何使用变量名访问对象的属性?

    这有效 psISE Options DebugBackgroundColor FFC86400 这不会 attribute DebugBackgroundColor psISE Options attribute FFC86400 错误 无
  • 如何使用 CSS 使两列居中?

    我试图在我的网站上居中放置两列 但存在一些问题 每次更改的结果都是左侧位置 参见picture http i46 tinypic com 5tov7 jpg 我究竟做错了什么 这是我的 CSS body background image u
  • JavaScript 中不区分大小写的正则表达式

    我想使用 JavaScript 从 URL 中提取查询字符串 并且想对查询字符串名称进行不区分大小写的比较 这是我正在做的事情 var results new RegExp name exec window location href if
  • 如何使用 Jackson 将一个 ObjectNode 作为子节点添加到另一个 ObjectNode 中?

    我有下面的 ObjectNode handlerObjectNode gt Info Brand BrandName TOP OF THE WORLD 我有另一个以下格式的 ObjectNode fieldObjects gt Descri
  • 按下按钮时如何隐藏/显示元素?

    我正在尝试学习如何使用 Eclipse IDE 开发 Android 我现在想做的是在按下按钮时使隐藏的 TableLayout 可见 但是 我不知道需要在按钮的 OnClick 属性中放入什么内容 另外 是否有任何在线教程可以帮助我学习如
  • 重新绘制自定义标签

    React Recharts 的自定义标签不适用于条形图 http jsfiddle net xpko4e7e http jsfiddle net xpko4e7e