问题标签 [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.
javascript - React/Redux 更新状态但重新渲染不更新图形数据
我正在一个项目中工作,该项目包含不同的选项卡,在每个选项卡中我们可以看到一个图表,该图表显示通过调用 API 获得的数据。(每个选项卡(图表)都在做一个ComponentDidMount()
来获取相关数据)。
鉴于我希望能够通过生成数据的模型的 run_id( job_name ) 过滤数据,我添加了一个下拉菜单,允许选择特定的job_name,该菜单被添加到 URL 的末尾在 中ComponentDidMount()
仅选择已实现作业的数据。目的是自动显示该作业的数据图表。
在这里,我们可以看到ComponentDidMount()
每次我想将所有数据传递给图形函数时使用的。
getFUelPrices(url)
API的调用在哪里
主页面结构如下:
这里handleOnChange()
是我们从下拉列表中选择新工作的地方。
所以在这里我将选定的 JobName 发送到不同的TotalComponents,它们会ComponentDidMount()
调用 API 和图形生成。
尽管如此,当我这样做时,我会正确更新我的状态,但除非我刷新应用程序,否则我的图表不会显示新数据。更准确地说,从下拉菜单中选择选项时:
我的图表正在重新渲染,因为线条颜色由于用于选择颜色的 Math.random 函数而发生变化,但图表的数据不会自动更新。
我知道这不是最好的解释,但我试图尽可能清楚。不要犹豫,询问更多细节或提问。
我怎么解决这个问题?目的是从下拉菜单中选择一个选项并自动显示新图表。
图形组件是:
谢谢,
reactjs - 如何防止在 React Recharts 中破坏轴长标签?
我正在使用 React Recharts ( http://recharts.org/en-US/ ) 来显示一些图表数据,我需要在轴附近显示格式化值。轴值由空格分隔,例如1 000 000 $
. React Recharts 将值分成单独的行
如何防止破坏标签并在同一行完全显示?
marquee - 在 ReCharts 上绘制选框
我目前正在做一个项目,该项目需要我使用一个气泡图,其中可以同时选择多个气泡项目。用户可以通过绘制选取框(边界框)来执行选择,就像 oracle OJ 图表功能一样。但由于 Oracle 图表位于 Jet 框架上,我无法将它无缝地用作我的 React 项目中的组件。
我真的很感激这个方向的任何指示。任何帮助是极大的赞赏!!
谢谢。
javascript - 使用 recharts ( Barchart ) 为响应式图表设置高度和宽度
我正在尝试使用 recharts 来实现 BarChart。但是width={600}
andheight={300}
导致条形图是绝对的,而不是响应式的。如何使条形图具有响应性?我尝试使用百分比,width={'50%"} height={"40%"}
但没有奏效。
recharts - 我怎么知道 recharts 图表何时准备就绪(线条已经出现并且动画结束了)?
我想将图表复制到剪贴板。我通过使用html2canvas
npm 包将图表转换为画布来做到这一点。
是否有任何我可以听到的事件表明图表中的线条已经绘制并且我可以安全地复制到剪贴板?
现在,如果我等待的时间不够长,我会得到一个空图表。
reactjs - 我想要使用图表在 y 轴上不均匀的间隔
我最近开始使用 recharts,问题是我想要 y 轴上的间隔不均匀。原因是我有很大的值(大部分超过 100)并且它们的变化是以点为单位的,所以为了让它们在视觉上易于理解,我想要 y 轴的 1/3 代表让我们说 100,下一个 1/3 代表 100-101 (值之间的范围不同)。一些示例数据就像
提前致谢
PS:名称在x轴上,uv在y轴上