问题标签 [recharts]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
968 浏览

javascript - 重新绘制图例不匹配格式化的数据键

我正在使用 Recharts 构建包含以下数据的图表:

我正在构建我的图表

显示工具提示时会出现问题,因为我们可以看到标题与刻度格式化程序不匹配

在此处输入图像描述

那么,我怎样才能使两者匹配,因为它们基本上是相同的信息?

0 投票
2 回答
12126 浏览

javascript - Recharts:关闭条形图的背景悬停

有没有办法关闭Recharts中条形图悬停时出现的灰色背景?

条形图的屏幕截图,条形图后面出现灰色背景。

使用版本 1.4.1。代码(简化)如下所示:

我翻阅了API 文档并查看了源代码。似乎不是一种方法,但有些演示禁用了它,比如这个

我尝试使用该演示之类的自定义形状设置我的,并使用Cell而不是渲染Bar,但悬停时背景仍然存在。背景颜色是#ccc,但使用该关键字搜索存储库没有产生明确的方法或道具来尝试覆盖或挂钩。

0 投票
1 回答
1371 浏览

javascript - recharts img 未在自定义点中呈现

我想将来自 URL 的图像呈现为折线图的点。

我添加了文档中显示的“CharacterDot”,但它没有呈现任何内容。如果我使用相同的代码但使用 SVG 而不是图像(确切地说它在文档中的使用方式)它可以工作。

这是文档中的一个示例。https://jsfiddle.net/alidingling/9y9zrpjp/

0 投票
2 回答
1596 浏览

html - Recharts - 将 dataKey 的值传递给子组件

如何将 dataKey 的值传递给另一个组件?我有一个带有自定义点的折线图,这些点需要数据中的值。如何将数据键的值传递给它?

0 投票
1 回答
2269 浏览

reactjs - 如何添加自定义 svg 作为重新图表的行/工具提示

我有一个有两条线的折线图。

对于其中一条线,我想使用自定义 svg 在图表中表示它。见截图。

我怎样才能做到这一点?

在此处输入图像描述

这是我的代码:

0 投票
1 回答
60 浏览

reactjs - 如何在 LineChart 上正确获取 xAxis?

我试图在 Recharts 中显示 LineChart,其中数据是数字,xAxis 也是数字,但它是隐式的(未明确存储在数据中)。

这个jsFiddle说明了这个问题。

如果我将 更改<XAxis /><XAxis type="numeric" />,它仍然无法正确显示,实际上根本没有绘制线条(但工具提示在那里)。同样,将域添加到 XAxis 并不能解决问题。

0 投票
0 回答
983 浏览

javascript - Recharts Line activeDot 函数会破坏工具提示?

我正在尝试基于 Recharts 中 Line 的 activeDot 触发函数。

使用默认值 时true,在图表上移动鼠标会显示默认工具提示、垂直突出显示的网格线,并且线上的点会按预期变大。

但是,假设我想使用来自 activeDot 的有效负载触发一个事件:

这有效,但工具提示和突出显示的行不再像您拥有activeDot={true}.

从函数返回true也不起作用。

我已经尝试过类似的方法activeDot={{ onMouseOver: this.activeDotHandler.bind(this) }},但是鼠标必须直接在点上。

我只想要默认的工具提示和 activeDot 功能,并添加一个带有 activeDot 有效负载的事件。

任何想法我做错了什么?先感谢您!

编辑:我还尝试添加onMouseOver<LineChart>自身,这有助于给我一个包含活动点有效负载的事件。但是,这仍然会禁用默认的工具提示/突出显示的网格/活动点样式。

编辑 2:还尝试返回<circle>after this.setState()。还是一样的问题。

0 投票
1 回答
172 浏览

javascript - Recharts - 如何改进最接近数字的可视化

我有一个图表,其中的值太接近了,例如:

  • 值 A -> 3.7747199435
  • 值 B -> 3.775531821
  • 值 C -> 3.7754975674
  • 值 D -> 3.8358619466
  • 值 E -> 3.8856710034

我得到了一个点之间有软差异的可视化。

平滑图表值

这是图表代码:

那么,我怎样才能提高图表的可视化效果呢?

0 投票
1 回答
112 浏览

reactjs - 数据字段的名称在 recharts 中不作为标签?

问题:

我创建了一个反应组件,我正在使用图表。我已经构建了一个自定义工具提示组件。我正在用标签检查情况。但它以数字的形式出现在标签上,而不是以我在数据集中提供的名称的形式出现。有人可以帮我解决这个问题吗?

这就是我的代码的外观。

0 投票
0 回答
1356 浏览

reactjs - 如何在 rechart 中删除 Xaxis 和垂直图表的图表之间的填充,并且它也不是 coorectly 应用颜色?

问题:

我正在我的反应应用程序中使用 recharts 创建一个图表组件。

这是我的代码。

这就是我的图表现在的样子。

在此处输入图像描述

试图找到一个解决方案,为什么它没有显示第一个元素的栏。我还尝试了许多方法,例如向 Xaxias 添加样式以删除 xAxis 和图表之间的填充。但我找不到任何解决方案。有人可以通过修改我的代码来帮助我找到解决此问题的方法吗?谢谢!!