问题标签 [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 投票
2 回答
27508 浏览

reactjs - Recharts 自定义标签

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

http://jsfiddle.net/xpko4e7e/

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

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

图像预览

0 投票
0 回答
2545 浏览

javascript - 在图表图例中重新绘制工具提示数据

我正在使用 React Recharts 包,我试图在图例中显示工具提示数据,而不是在鼠标光标周围悬停的工具提示。

我已经使用处理程序设置了一些自定义 Tolltip 内容,以将工具提示有效负载传递回 Legend 组件。当鼠标悬停在图表数据点上时,我想用工具提示数据进行更新。

我已经为工具提示内容设置了一个自定义工具提示反应元素,如下所示:

<Tooltip isAnimationActive={false} content={<CustomTooltip handler={this.handler} />} />

处理函数设置如下:

//this.setState(this.state);注释掉时,当您将鼠标悬停在图表数据点上时,工具提示将在图表内显示工具提示光标。但是,在这种情况下它不会更新反应状态,因为图表不会再次呈现。

您可以在http://jsfiddle.net/elronalds/1zwxh3bm/5/看到图表工具提示正常工作,但图例未更新

如果在处理程序中强制进行状态更新,this.setState(this.state);则图例将更新,但工具提示光标不会在您悬停时输出,因此您无法轻松查看悬停在哪些数据点上。

您可以在http://jsfiddle.net/elronalds/1zwxh3bm/6/上看到图表图例更新,但悬停数据点时不显示工具提示光标。

我的处理程序是否有问题CustomTooltip或者我如何更新 React 状态?我是 React 新手,所以我不确定这里发生了什么。

0 投票
0 回答
2198 浏览

javascript - 用指针重新绘制工具提示 (react,tooltip)

在试图用指针显示工具提示的折线图上,该指针显示虚线相应地指向 x 轴和 y 轴。问题是我可以单独使用它们,但不能一起使用,因为 onMouseMove 状态会干扰工具提示的显示。有解决方案吗?在此处输入图像描述

任何帮助,将不胜感激

0 投票
1 回答
119 浏览

reactjs - 反模式:在 render() 方法中更新(不相关的)状态

我正在重写 Recharts 的工具提示功能,以在页面的其他位置(在另一个组件中)提供悬停数据。

showToolTipData 触发了一个动作创建器,它修改了当前渲染方法敏感的状态树的一部分,但我仍然收到可怕的反模式警告:

此警告既正确又不正确,因为渲染组件不受状态更改的影响。我关心这一点的唯一原因是警告可能会向控制台发送垃圾邮件(有 1000 个点中的 10 个悬停在上面)。

有一个更好的方法吗?我考虑过使用目标悬停数据组件的“私有”状态(与现在使用的 redux 状态相反),但我在其他地方也需要该数据。将功能移至componentWillMount()是不可能的。

有人找到了一种更安全的方法来覆盖 ToolTip 函数吗?

0 投票
0 回答
4168 浏览

javascript - 用指针重新绘制工具提示 (react,tooltip) - 代码部分

这个问题是这里发布的问题的代码:Recharts tooltip with pointer (react,tooltip)

原来的问题:

在试图用指针显示工具提示的折线图上,该指针显示虚线相应地指向 x 轴和 y 轴。问题是我可以单独使用它们,但不能一起使用,因为 onMouseMove 状态会干扰工具提示的显示。有解决方案吗?

图表.js

0 投票
2 回答
3096 浏览

javascript - 仅针对某些数据点重新绘制 LineChart 点

我想使用 Recharts 的 LineChart 来显示最多 200 个点的数据集。但是,我想在小屏幕上仅显示其中 5 个数据点的点/工具提示/activeDot,因为在智能手机上将无法再点击 200 个点。

我怎样才能做到这一点?

0 投票
1 回答
92 浏览

javascript - 单击时创建新的 React 组件(图表页)

我对 react.js 真的很陌生,还在练习

当用户在表中选择一行时,我想将 ReChart 组件呈现为新页面(只是为了可视化数据)。

我试过这样的事情:

(必须在此处插入分号,因为未显示标签)

不幸的是它没有帮助。这里有什么猜测吗?

先感谢您!

0 投票
1 回答
1023 浏览

javascript - How to prevent the last tick from rendering? Using 'recharts' library

I have a chart with reversed yAxis. How do I prevent last tick (in this case it's number 8) from rendering? Here is a jsfiddle

0 投票
0 回答
547 浏览

reactjs - 在 Recharts 中绘制多个数据集

我只想在 Recharts 中用 react 绘制一些数据。

它真的很酷,但有一个问题。它只允许绘制一个数据集而不是任何其他数据集。你知道我该怎么做吗?也许另一个框架也非常简单和漂亮:)

先感谢您!

0 投票
1 回答
6941 浏览

javascript - Recharts - 标准化堆积条形图

我对 React 和 Recharts 都很陌生,而且我正面临着一些困境。我做了很多阅读,但似乎找不到我要找的东西,所以我希望我能在这里得到一些帮助。

我有一个数据集,其中包含一个包含已完成、失败和正在进行状态的进程列表,我想显示一个堆叠条形图,但将它们标准化——即它们都需要具有相同的宽度。我设法让它大部分工作,但在条形图上显示值被证明是一种痛苦。

下面是我的代码:

结果是这样的: 带有堆积条形图的仪表板屏幕截图 如您所见,这些数字是……嗯……奇数,只有当我添加 stackOffset="expand" 属性时才会发生这种情况。

如何将部分的实际值获取到我的标签,而不是基于 stackOffset 的计算值?我显示的值是两个值的数组,我尝试对这些值进行一些操作但没有成功。

任何帮助都感激不尽。