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

javascript - React/Redux 更新状态但重新渲染不更新图形数据

我正在一个项目中工作,该项目包含不同的选项卡,在每个选项卡中我们可以看到一个图表,该图表显示通过调用 API 获得的数据。(每个选项卡(图表)都在做一个ComponentDidMount()来获取相关数据)。

鉴于我希望能够通过生成数据的模型的 run_id( job_name ) 过滤数据,我添加了一个下拉菜单,允许选择特定的job_name,该菜单被添加到 URL 的末尾在 中ComponentDidMount()仅选择已实现作业的数据。目的是自动显示该作业的数据图表。

在这里,我们可以看到ComponentDidMount()每次我想将所有数据传递给图形函数时使用的。

getFUelPrices(url)API的调用在哪里

主页面结构如下:

这里handleOnChange()是我们从下拉列表中选择新工作的地方。

所以在这里我将选定的 JobName 发送到不同的TotalComponents,它们会ComponentDidMount()调用 API 和图形生成。

尽管如此,当我这样做时,我会正确更新我的状态,但除非我刷新应用程序,否则我的图表不会显示新数据。更准确地说,从下拉菜单中选择选项时:

我的图表正在重新渲染,因为线条颜色由于用于选择颜色的 Math.random 函数而发生变化,但图表的数据不会自动更新。

我知道这不是最好的解释,但我试图尽可能清楚。不要犹豫,询问更多细节或提问。

我怎么解决这个问题?目的是从下拉菜单中选择一个选项并自动显示新图表。

图形组件是:

谢谢,

0 投票
2 回答
2143 浏览

reactjs - 如何防止在 React Recharts 中破坏轴长标签?

我正在使用 React Recharts ( http://recharts.org/en-US/ ) 来显示一些图表数据,我需要在轴附近显示格式化值。轴值由空格分隔,例如1 000 000 $. React Recharts 将值分成单独的行

在此处输入图像描述

在此处输入图像描述

如何防止破坏标签并在同一行完全显示?

0 投票
0 回答
165 浏览

marquee - 在 ReCharts 上绘制选框

我目前正在做一个项目,该项目需要我使用一个气泡图,其中可以同时选择多个气泡项目。用户可以通过绘制选取框(边界框)来执行选择,就像 oracle OJ 图表功能一样。但由于 Oracle 图表位于 Jet 框架上,我无法将它无缝地用作我的 React 项目中的组件。

OJ 图表选框选择

来源链接:http ://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=bubbleChart&demo=selection

我真的很感激这个方向的任何指示。任何帮助是极大的赞赏!!

谢谢。

0 投票
3 回答
43417 浏览

javascript - 使用 recharts ( Barchart ) 为响应式图表设置高度和宽度

我正在尝试使用 recharts 来实现 BarChart。但是width={600}andheight={300}导致条形图是绝对的,而不是响应式的。如何使条形图具有响应性?我尝试使用百分比,width={'50%"} height={"40%"}但没有奏效。

0 投票
4 回答
6364 浏览

reactjs - Recharts 设置显示数字的 Y 轴值基数

嗨,我正在尝试使用 Recharts 显示一些数据,但遇到了问题。我要显示的数字太大,我的 Y 轴被网页截断。他们是否可以根据数据设置或自定义 Y 轴值以显示 10K、10M 等而不是 10,000 和 10,000,000?

在此处输入图像描述

0 投票
1 回答
7153 浏览

css - 更改工具提示的样式 - recharts

我为我使用 recharts 实现的图表创建了一个自定义工具提示。我想更改它的样式,但无法删除行之间的多余空格。我尝试更改行高、填充和边距以删除空间,但没有任何效果。

在此处输入图像描述

哪个样式属性可以帮助我实现它?

0 投票
1 回答
684 浏览

recharts - 我怎么知道 recharts 图表何时准备就绪(线条已经出现并且动画结束了)?

我想将图表复制到剪贴板。我通过使用html2canvasnpm 包将图表转换为画布来做到这一点。

是否有任何我可以听到的事件表明图表中的线条已经绘制并且我可以安全地复制到剪贴板?

现在,如果我等待的时间不够长,我会得到一个空图表。

0 投票
1 回答
1205 浏览

recharts - 重新绘制条形图中的参考线显示在左侧而不是中间

由于我没有在 recharts github 上得到答案,我想知道这里是否有人可以提供帮助。

我要做的是使用 ReferenceLine 和 ReferenceDot 在条形图中的 xaxis 上显示“今天”。ReferenceDot 工作正常,它位于 Bar 的中间。遗憾的是,ReferenceLine 并非如此,它位于 Bar 的一侧。

有谁知道如何影响它?任何想法可能如何编写一个可以工作的自定义组件?

图片解释我的问题

0 投票
0 回答
273 浏览

reactjs - 我想要使​​用图表在 y 轴上不均匀的间隔

我最近开始使用 recharts,问题是我想要 y 轴上的间隔不均匀。原因是我有很大的值(大部分超过 100)并且它们的变化是以点为单位的,所以为了让它们在视觉上易于理解,我想要 y 轴的 1/3 代表让我们说 100,下一个 1/3 代表 100-101 (值之间的范围不同)。一些示例数据就像

提前致谢

PS:名称在x轴上,uv在y轴上

0 投票
2 回答
6211 浏览

reactjs - 如何在条形图的单击上显示新元素

我已经使用 recharts 实现了条形图。当我单击将显示与栏相关的其他信息的栏时,我想在图表区域之外显示一个新的 div 元素。我添加了一个函数,该函数将返回一个需要在 onClick 事件上显示的 div 元素。

在此处输入图像描述

该函数被调用并正确运行,但我在任何地方都看不到 div 元素。不添加新组件就不能添加新的 div 元素吗?