问题标签 [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 回答
5736 浏览

javascript - React.Js - rechart 放大/缩小和画笔问题

我正在使用Rechart库并使用 AreaChartFillByValue。我面临以下问题

1) 当我放大图表时,它超出了 x 轴,当我缩小它时,它只是重置到它开始的位置,例如:假设当前起点是 1 到 15,但实际数据是 30,什么时候我放大它在 x 轴上显示 5 到 10 的值,当我放大它时它恢复到 1 到 15 的值。我希望它应该缩放直到整个数据显示从 1 到 30。2

)当我放大画笔时应该缩小并显示过滤器的起点和终点例如:假设当前起点是 1 到 15,当我放大时它在 x 轴上显示 5 到 10 的值,但画笔仍显示 1 到 15 的值。

3)放大时无法拖动图表。我可以拖动画笔并更新图表显示,但无法从图表中进行。

4)当我使用画笔时,颜色分割不起作用。正值显示为绿色,负值显示为红色。但它没有正确地取中间值。我使用画笔按照官方教程链接给出了同样的问题。

我尝试了互联网上提供的所有示例,但无法找到放大和刷子的解决方案。如果有人能解决这个问题,那就太好了。由于GITHUB中没有类似的未解决问题

为了更清楚,请看下面两个预期的图像。
我的输出 我的代码:stackblitz 编辑器预期输出我的输出 一

上图的示例链接

二

上图的示例链接

0 投票
1 回答
1086 浏览

reactjs - React Recharts 的响应高度

我正在使用反应线图。同样,我需要动态高度,因为图表可能会根据其他一些标准改变高度。如果我将高度赋予LineChart或使用ResponsiveContainer,如果折线图没有应用到它的高度那么长,则在其上方的 DIV 和自身之间存在一些差距,但是如果图表足够长,则差距不存在。

请建议我是否可以为此做任何事情。

0 投票
2 回答
531 浏览

javascript - How to sync Recharts chart with something custom that is not a Recharts graph

Currently, you can easily sync two charts by using the syncId property, like in this fiddle.

I'd like to design something with D3, outside of Recharts scope. Is it possible to catch events or callbacks allowing me to sync my custom component the same way two Recharts components does?

Thanks

0 投票
1 回答
934 浏览

javascript - 如何在图表中的 y 轴上按固定量间隔值

我正在尝试在图表中显示一个图表,该图表的 y 轴将在 5000 秒内上升。我希望它的刻度为 0、5000、10000,... 最多比最大值多 5000。理想情况下,笛卡尔网格应该在这些刻度值处有水平线。

我做了很多谷歌搜索,查看 github 问题和 SO 问题。我尝试了各种间隔、tickSize、tick 等。

0 投票
1 回答
843 浏览

javascript - ReCharts.Js 阴影区域用于图表的全高(并与 Brush、dataMax 一致)

我正在尝试创建一个要根据键的存在进行着色的区域。我希望阴影在 Y 轴上从最小值到最大值,并且我希望最大值取决于数据集的当前局部最大值(相对于画笔)。

我尝试使用 ReChart.js 的内部结构,例如 getTicksOfAxis 和 getValueByDataKey,因为我知道 Y 轴已经知道局部最大值,所以我不必重新发明轮子。任何人都有任何解决方案

和我一起玩

0 投票
1 回答
620 浏览

chart.js - Admin-on-rest 图表

我需要做一个网页来完成我的 uni,我完成了大约 90%,但是,我正在努力让自定义迭代器和图表工作。我正在尝试使用 Recharts,但我不知道如何让它收集我想要的信息(我需要它来获取注册的用户数量和他们服用的疫苗数量),但我在文档上看到的一切都准备好了结果,我不确定 ChartJS 是否会让它变得更好,即使它确实如此,我对自定义迭代器的工作方式感到困惑,因为我从另一个 StackOverflow 问题中获取了我的“分析”,但这是我最不担心的,因为这似乎比让实际图表工作更简单。帮助将不胜感激,因为我有 2 周的时间来交付它并且我坚持这一点,而且它的关键是我让它发挥作用。

哦,是的,我在 Javascript 方面也很差,所以欢迎提供所有信息。

编辑:忘了说我环顾四周,但其中很多都是为了更简单和静态的东西,而不是数据库计数或类似的东西。

0 投票
0 回答
891 浏览

javascript - Recharts BarChartStackedBySign - 是否可以在 Y 轴两侧显示相同的实体

在 Recharts 的 BarChartStackedBySign 中,我想比较当前和上一年的给定实体,表示条形图上的实体。

问题是如果通过两个不同的对象提供,重新图表会将它们视为不同的实体。

在共享的小提琴中,我们可以看到每个水果在 x 轴上表示两次,我希望每个水果在 x 轴上只出现一次,当年的数据在 +y 轴上表示,上一年的数据在 -y 轴上表示。

小提琴链接 - https://jsfiddle.net/59ugdj1t/

0 投票
0 回答
155 浏览

javascript - Recharts - 如何为“step”类型的区域组件添加圆角

我已经开始使用Recharts,但我正在努力解决设计问题。

我正在尝试向类型为“step”的区域组件添加边框半径。

这是我目前拥有的: 在此处输入图像描述

这就是我想要得到的:

(如您所见,边角略微圆润) 在此处输入图像描述

有谁知道是否有可能实现这样的目标?如果不是,他们有什么解决方法吗?

0 投票
1 回答
445 浏览

reactjs - 如何在点/悬停工具提示中添加额外信息

我在我的项目中使用图表。我使用的图表是CustomizedLabelLineChart. 我的问题是我用于 X 轴的值太长,所以我需要将它们从 X 轴中删除,但仍将它们放在图表悬停工具提示中。怎么做?换句话说,我需要在每个点/悬停工具提示中添加一些额外的数据。

在此处输入图像描述

0 投票
0 回答
1059 浏览

reactjs - Recharts ScatterChart Y 轴类别问题

我有一个非常简单的问题,但我无法找到解决方案。我想更改 Rechart 的 X 和 Y 轴<ScatterChart/>

这是原始 Rechart 演示的链接https://jsfiddle.net/alidingling/uLysj0u2/

这是我的代码。

结果我想要但没有改变 X 和 Y 轴: 在此处输入图像描述

如果我改变 X 和 Y 轴,我得到的结果: 在此处输入图像描述

如果 type="number" 可以正常工作,但我需要类别。