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

reactjs - Recharts 自动换行 x 轴标签

我想像在这个演示中那样对长标签进行自动换行。据说这个 PR支持它,但我无法使用它

0 投票
1 回答
4153 浏览

reactjs - 如何减慢 Recharts 中的动画时间?

我试图减慢recharts中的动画,但我对此一无所知..

我在 CSS 部分尝试过,但这不起作用

isAnimationActive={true}是启用动画 isAnimationActive={false}是禁用动画 无论如何处理动画时间,

这是我的代码

recharts Js小提琴链接

0 投票
2 回答
5456 浏览

recharts - 如何使用 PolarAngleAxis 中的 tickFormatter 为 RadarChart 自定义刻度?

我希望雷达图显示具有自定义字体样式和方向(在旋转方面)的标签。基本上我想减小字体大小并旋转文本,有人能给我一个 PolarAngleAxis 中的 tickFormmater 的例子吗?`

`

0 投票
2 回答
1182 浏览

reactjs - 如何找到 React 组件的 DOM 节点名称?

我正在开发一个 React 应用程序,它具有用于创建条形图的 ReCharts。除了在屏幕上显示之外,我还想将图形导出到文件以存储在数据库中。

正如我在这里的其他问题中看到的那样,要导出图表,我可以这样做:

但是我无法插入图表的 DOM 节点名称(this.currentChart)。另一个问题使用的方式对我不起作用:

我在 findDOMNode 中尝试了组件名称,但出现错误:

我的图形组件在另一个文件中,并在我的顶级 render() 函数中声明如下:

如何调用 ReactDOMNode 才能导出图表?

0 投票
2 回答
8458 浏览

javascript - Recharts - 水平对齐折线图和条形图

我正在使用 Recharts 并且有一个显示折线图和条形图的组件。这两个图表显示相同的 7 天跨度,但刻度未对齐。折线图从 Y 轴线开始,而条形图有左填充(默认情况下)。

在折线图上,我尝试添加 padding={{left: 100 }},它使 X 轴的起点对齐,但其余的刻度都关闭了,更重要的是它不响应屏幕尺寸。据我所知,不允许使用“5%”之类的东西。

在条形图上,我尝试将填充设置为零和负数,但在响应缩放和刻度错位方面遇到了同样的问题。

有没有办法对齐两个图表上的刻度和数据?

这是代码:

Recharts 折线图和条形图对齐

0 投票
1 回答
1248 浏览

javascript - 当 type="category" 时,XAxis 在 Rechart 的 ScatterChart 中重复自身

在下面的图片/代码中,应该只出现一次 hi、hello 和 bye。关于为什么重复的任何想法?

在浏览器中编辑:http: //jsfiddle.net/ndLhnegs/318/编辑:我在这里做了另一个更简单的例子:http: //jsfiddle.net/7coegorj/2/

在此处输入图像描述

React Rechart 组件:

在这里提交了一个 GitHub 问题 - https://github.com/recharts/recharts/issues/1034

0 投票
1 回答
3040 浏览

javascript - ReChart does not render multiple Bars

I have a BarChart from rechart:

http://recharts.org/#/en-US/api/BarChart

The problem I have is that the second bar of my chart does not render unless it is equal to the value of the first bar.

If you see the valuePost key of the data array, it wont show unless you set the value to 3.

#xA;

Here's the fiddle:

http://jsfiddle.net/oqg00j2j/

0 投票
1 回答
1282 浏览

javascript - Rechart:使用 React-Responsive 的打印预览中未显示条形图

我有一些与 reCharts 反应的条形图:

http://recharts.org/

我试图通过使用反应响应来调整字符的宽度:

https://www.npmjs.com/package/react-responsive

我使用这些组件来识别我是否处于打印模式并以不同的宽度呈现条形图:

像这样:

图表在浏览器上完美呈现。但是当我使用打印预览模式时,我看不到这些条。

有谁知道为什么会发生这种情况,我该如何解决这个问题?

0 投票
1 回答
2705 浏览

reactjs - 单击事件不适用于 Recharts 饼图标签

我正在为 React 项目开发Recharts插件,以显示带有 2 个部分和自定义标签的饼图。

我的要求是在点击时获取饼图部分的值。我可以通过将 onClick 道具添加到Pie标签来实现它。但问题是当我单击饼图中的标签时,不会触发单击事件。

一些搜索结果说,我们不能在 svg 子元素(如 rect、circle、text 等)上设置 click 事件。

有人遇到过这样的问题吗?请帮助我如何进行此操作。

饼图代码

点击事件函数

自定义标签代码库

}

下面是图表的截图。

饼形图

0 投票
1 回答
2372 浏览

reactjs - Recharts ScatterChart 不渲染点并在 XAxis 中重复值

我正在尝试使用ReCharts渲染 ScatterChart 。

y 轴正确渲染,不同散点线的标签也是如此,但是没有出现点,x 轴包含重复值。

prediction_type指定数据是否包括下限和上限值。这对我的问题并不重要。无论价值如何,问题都会发生prediction_type。这是一个示例datum

还有一个示例data{ test@yahoo.com: datum }

没有点,x 轴值重复。

在此处输入图像描述