问题标签 [react-chartjs]

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 回答
5308 浏览

javascript - 无法在 react-chartjs-2 中分配类型

我正在使用反应和打字稿。我收到类型错误。我该如何解决?

位置是字符串类型。 http://www.chartjs.org/docs/latest/configuration/legend.html

[反应 + ts + react-chartjs-2]

[错误。] 属性“选项”的类型不兼容。

0 投票
1 回答
1100 浏览

reactjs - React ChartJS 防止新数据在重绘后被添加到状态中?

我正在尝试使用 react-chartjs-2 更新我的图表。我正在使用日期选择器来过滤不同的数据并相应地重新渲染图表,例如显示今天、昨天、过去 7 天的数据等。数据正在从我的数据库中获取

但是,当图表被重绘并重新渲染时,它会被添加到我不想要的状态中。我只是想重新渲染请求的新数据而不是重新渲染并添加到图表中的旧数据中。

实际上,我之前使用 vanilla JavaScript 解决了这个问题,因为我没有使用 react 我使用destroy()了图表文档说要使用的方法,但我不确定如何将它与 react 一起使用?

因此,经过进一步检查,我的图表似乎重新渲染得很好。然而,当它被重新渲染时,额外的数据被添加到我不想要的我的 chartData 状态,我只希望被请求的新数据显示在图表上。我仍在试图弄清楚那部分。

这是我的代码,我有很多,所以我只会显示相关部分:

0 投票
3 回答
4958 浏览

reactjs - react-redux RangeError:超出最大调用堆栈大小

当我为我的图表 (react-chartjs-2) 获取数据时收到此错误。我实现了 try/catch 块,但不知道如何消除此错误。在 Edge 浏览器上,我得到 CRIPT28: SCRIPT28: Out of stack space

这是我在组件中调用的操作。

这是我连接到 redux 商店的组件。它;在我看来,一切都很好。

0 投票
1 回答
216 浏览

react-native - 放置在另一个 SVG 下时使图表可点击

我在使用 React Native 中的一些 SVG 时遇到问题。我有一个可点击且运行良好的图表,然后我需要在图表顶部放置另一个 SVG 以绘制一条代表极限得分值的线。我现在面临的问题是我无法再单击图表,因为 SVG 的视图被放置在它的顶部。我将 SVG 的背景颜色设置为透明,这样我至少可以看到它后面的图表,但是,我不知道如何让它再次可点击。

是否有任何工作可以让我通过放置在顶部的透明视图使图表可点击?

这可能是一个愚蠢的问题,但总的来说,我对 react 和 JS 都很陌生,所以我真的可以使用任何类型的帮助。:)

这是图表的图片:

极坐标图和 Svg 圆

如您所见,这里的 Svg 具有非透明背景,几乎覆盖了孔图。

覆盖图表的 svg

这是SVG代码:

这是图表形式chartjs:

他们在一个视图中在一起:

0 投票
0 回答
414 浏览

javascript - 如何使chartjs中的饼图可点击(react-native)

我正在使用一个使 chartjs 在 react-native 上可用的库:

react-native-chartjs。

该图表运行良好,但当我按下饼图时,我只得到工具提示。我想要的是创建我自己的函数来加载一个弹出窗口而不是chart.js提供的工具提示你们会怎么做?它甚至可行吗?(我对 react-native 很陌生,如果这是一个愚蠢的问题,我很抱歉)。

图片: 图表

图表代码:

0 投票
1 回答
681 浏览

javascript - 如何在chart.js中添加带有白色阴影边框的彩色点?

尝试在 React chart.js 版本:2.7.2 中添加带有白色阴影边框的彩色点,但没有运气请任何帮助。

我现在拥有的

在此处输入图像描述

我的代码:

我想做的事

在此处输入图像描述

此图表与 chart.js 版本:2.6.0 这两个版本之间的图表 css 不同吗?

0 投票
1 回答
935 浏览

javascript - Chart.js 堆叠折线图,具有不同样式的部分

我的 React 应用程序使用react-chartjs-2(它又使用最新的 Chart.js 2.7.2)。我正在尝试在倒数第二个和最后一个 x 轴标签之间创建具有不同样式部分的堆叠折线图,如本示例所示:

示例图表

如何实现?

0 投票
2 回答
2096 浏览

reactjs - 获取状态值时出错:未捕获类型错误:无法在 Function.keys 处将未定义或 null 转换为对象

我很陌生,很抱歉问了这么简单的问题。

我正在尝试使用来自在线 API 的 ChartJS 创建图表。

我的js脚本:

问题发生在:label: Object.keys(this.state.daily_data[this.state.currency])

fetch API 工作正常,因为在我的 react 工具中它实际上表明 statedaily_data具有所有 API 值:

在此处输入图像描述

当我阅读文档以及 StackOverflow 上的一些类似问题时指出,ReactJS 不会立即改变更新并且可以调用回调来解决问题,我不确定这是否真的是问题所在。

谢谢。

0 投票
1 回答
627 浏览

javascript - 删除chartJS水平条形图中的零线

我有一个水平条形图,如下所示: 在此处输入图像描述

它是用 react-chartjs-2 实现的:

如您所见,每个条的中心都有一条白色(或空)线。所以问题是:我怎样才能删除它?我不能使用 zeroLineColor 选项,因为我有不同的条形颜色

0 投票
5 回答
9438 浏览

javascript - 在 React-Chartjs-2 框的圆环图中添加文本以做出反应

我创建了一个圆环图,它可以正常工作,但现在我需要在其中心显示数字 45,例如。

我应该在哪里指示要显示的文本和坐标?在图表的选项中?

我正在使用反应组件

编辑

我找到了这个插件,但我找不到它如何应用于反应组件

谢谢你的帮助。