问题标签 [recharts]

我需要使用 React Recharts 制作包含三个部分的饼图。

我有两个问题：

1. 在鼠标悬停时，我想在工具提示中显示带有百分比的文本。如何在工具提示中获取百分比值？

2. 更改大小时，如果饼图中的某些部分太小，则我需要隐藏标签；如何做到这一点？

我的示例代码

使用activeShape，能够获取每个部分的百分比值，但我需要在工具提示中显示百分比。

谢谢。

recharts我正在使用库创建水平条形图。我想在左侧对齐 y 轴标签。

提琴手

我正在尝试为我的数据可视化应用程序创建一个自定义的可折叠图例。它使用反应和图表。该组件第一次渲染得很好。但是当我折叠图例并重新打开它时，响应式容器不会缩小以适应。如果我知道父容器的大小（以像素为单位），这会更容易，但我没有关于渲染的信息。这是图表或弹性框的错误还是我做错了？

继承人的代码：https ://codesandbox.io/s/8krz9qjk52

澄清：问题是当我关闭然后打开图例时，图例组件被推出查看区域并且图表不会收缩回原来的较小尺寸。

我正在使用 Recharts BarChart组件来可视化我的数据。在Bar 组件中，它支持一些事件处理程序（onClick、onMouseDown 等）。

我的问题：我有一个 onClick 事件处理程序，因此用户可以单击条形图并根据结果 ID 重定向到其他页面。

我的问题：如果条形图的值为 0，则用户无法单击链接，因为 onClick 事件处理程序是在条形本身上实现的。

源代码：

截图：

我的尝试：

我试图查看一个可能的解决方案并在 recharts 网站上观察 API 上的示例，我没有看到任何能够解决我的问题的东西。我还尝试在轴或栏上的标题上单击 onClick，但该组件不支持该功能。请指教。

我的任务相当简单：我要做的就是将字体系列更改Roboto, sans-serif为 x 轴和 y 轴“刻度”（即沿两个轴的值）。

我可以通过以下方式更改 x 轴刻度的字体大小： <XAxis tick={{ fontSize: 'sans-serif!important' }} />

但这不起作用： <XAxis tick={{ fontFamily: 'sans-serif' }} />

我能看到的唯一其他选项是使用tickFormatter文档中指定的属性，它只接受一个函数，请参见此处：http ://recharts.org/#/en-US/api/XAxis

在这个项目中，我们使用 Recompose 实用程序库在 React 中使用函数式编程，因此我们以“纯”函数样式而不是普通的 React 类来渲染 JSX。

这是我能想到的最好的猜测是：

这会沿 x 轴输出 [object, Object]，请参见屏幕截图：

文档中唯一类似的官方示例在此处使用旧createClass语法：https ://jsfiddle.net/alidingling/9y9zrpjp/

任何帮助将不胜感激，因为我已经在谷歌上搜索了尽可能多的类似问题，并且到目前为止在这个问题上花了大约半天的时间。

我在反应中使用 ReCharts (1.0.0-beta.10)。

我用来渲染图表的代码是：

结果是：

我该怎么做才能让图表在标签结束后开始（标签大小可能不同）？

我正在使用Rechartswith React，我正在使用代码获得以下输出，为什么它不在那里显示条形？（甚至 Bar 背景也在渲染）

有什么，我缺少导入或添加吗？

这是我的输出：

是否可以在工具提示上为大数字添加逗号？

例如 57,574 而不是 57574

谢谢！

我发现了许多类似标题的问题，但没有一个解决了在 Recharts PieChart 的情况下如何解决“数组或迭代器中的每个孩子都应该有一个唯一的“关键”道具”。

有人可以告诉我应该在代码的哪一部分添加键吗？

我尝试将其添加为

我尝试在不同的其他部分添加密钥。

它没有帮助。

将鼠标悬停在 React recharts 中的图例上时，我正在尝试实现不透明度更改：https ://jsfiddle.net/alidingling/1p40zzfe/

但是，我总是收到错误消息：TypeError：无法读取 null 的属性“不透明度”。有什么原因吗？它的 Legend 组件具有导致问题的“OnMouseEnter”和“OnMouseLeave”行。

谢谢