问题标签 [react-native-chart-kit]

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

javascript - onDataPointClick 功能不起作用 - react-native-chart-kit

我正在使用这个库:react-native-chart-kit

我想捕捉用户的点击line-chart

这是我的代码:

onDataPointClick={()=>console.log('masoud')}根本没有打电话。

这是line-chart这个库的完整源代码:

0 投票
2 回答
6243 浏览

javascript - 自定义 React Native Chart Kit 的颜色

使用该包为 React Native 应用程序创建了一个基本的折线/面积图react-native-chart-kit,如下面的代码所示。

问题:我们如何独立更改绘图组件的样式/颜色?如点、线描边、面积、轴、刻度标签等...

当更改中的color参数时chartConfig,它似乎会影响几乎整个图表,包括轴刻度标签、网格线、线图下的区域。

是否可以为图表的每个单独属性定义颜色?

在此处输入图像描述

代码:

0 投票
1 回答
1990 浏览

javascript - 用 react-native-chart-kit 图表填充父容器(React Native,Expo)

react-native-chart-kit在 React Native Expo 应用程序中使用来呈现图表。文档中提供的示例工作正常

问题:在我的应用程序中,需要图表来填充父容器,但似乎图表必须将height道具作为固定值。

尝试将height值设置为100%或删除定义将导致与 NaN 相关的错误

Invariant Violation: [.....,"y1":"<>","x2":"375","y2":"<>"}] 不能用作本机方法参数

这个问题有解决方案吗?谢谢!

基于文档的工作示例


@hong 开发

react-native-chart-kit组件<LineChart />可以是另一个高度可变的组件的子组件。所以<LineChart />不一定有 给出的高度Dimensions.get('window').height;。例如,

0 投票
1 回答
2252 浏览

react-native - 如何为 react-native-chart-kit StackedBarChart 添加水平滚动?

我期待使用 react-native-chart-kit 创建可水平滚动的 StackedBarChart。是否可以使用此软件包创建此类图表以及如何创建?

0 投票
3 回答
1187 浏览

api - 更新由 RNSVGPath 管理的视图的属性“d”时出现 react-native-chart-kit 错误:

我正在使用 react-native-chart-kit 饼图。

在数据数组中,我没有在总体中写入数字,而是在编写“this.state.data”,如下所示,因为我从 API 获取数字。

]

但是我收到错误“更新由 RNSVGPath 管理的视图的属性“d”时出错:”。知道如何解决吗?

0 投票
1 回答
185 浏览

react-native - 在 react-native-chart-kit 中绘制零星数据

我最近开始使用 react-native,并且一直在研究图形/图表库以获取我的应用程序创意。

我真的很喜欢它的外观,react-native-chart-kit但是我无法解决的一件事是如何在数据中有差距的地方绘制一系列数据。

例如,如果我要绘制一个月内每天降雨量的折线图,但没有在周末记录任何数据,那么我希望从周五点到周一点有一条直线,同时为周六和周日留出空间。

目前我得到的最接近的是在没有条目时向我的数据系列添加一个特殊值 -1,然后将所有值为 -1 的索引添加到与该hidePointsAtIndex字段一起使用的数组中以隐藏这些条目然而,这只是防止在这些点上渲染一个点,它不会阻止线穿过它们。

有没有办法实现我想要用这个库做的事情?或者,是否有更适合绘制我正在使用的数据类型的库?

抱歉,如果这是一个基本问题/以愚蠢的方式提出,我是图形数据世界的新手,所以很可能有一些术语我弄错了。

谢谢你的帮助

0 投票
0 回答
303 浏览

react-native - 使用 react-native-chart-kit 渲染饼图时出现错误“requireNativeComponent: 'RNSVGLinearGradient' was not found in the UIManager ...”

我已经在我的项目中使用过react-native-chart-kitreact-native-svg最初我在 Expo 中创建了我的项目,它工作正常(饼图渲染完美,没有问题)但是当我退出 Expo 并运行项目时react-native run-android,我收到了这个错误。

我尝试升级/降级 and 的版本react-native-chart-kitreact-native-svg但错误仍然相同。还react-native-svg与 react-native 相关联(仍然没有运气)

我不明白的是,当我在 Expo 上工作时,我没有收到任何错误(即使在构建 Release APK 之后也没有),但是当我弹出 expo 并运行时react-native run-android,它会产生错误。

另外,我创建了一个干净的项目,只有一个屏幕用于渲染饼图,但错误是相同的。

请提供一些继续下去的东西,卡得很厉害。

0 投票
1 回答
2333 浏览

react-native - 试图注册两个同名的视图 RNSVGRect

面对这个问题,当我将两个库 react-native-d3multiline-chart 用于折线图和条形图时,我使用的是 react-native-svg-charts。两个库都使用相同的 react-native-svg,当我使用 react-native-svg 时,它显示上述错误。我们该如何解决?

0 投票
1 回答
1927 浏览

react-native - 如何更改条形图中的 x 轴和 y 轴位置(React Native)

我是 React Native 的新手。我想知道我们是否可以将X轴和Y轴的位置改变成这样(请参考我下面附上的图片)

示例条形图

从上图中可以看出,经理是 x 轴,而销售是 y 轴。我目前正在使用“react-native-chart-kit”中的“BarChart”。

0 投票
0 回答
351 浏览

javascript - 执行 UI 块时抛出异常

我遇到了 expo 和 react-native-chart-kit 的问题。看截图:

截屏

世博SDK:36.0.0

谢谢