问题标签 [react-native-svg-charts]

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

react-native - EXPO react-native-svg错误:-“更新由RNSVGPath null管理的视图的属性'd'时出错。对于输入字符串:“c”

react-native-svg 和 android 似乎存在问题。此错误仅在我的Android应用程序中引发 - iOS 应用程序似乎没问题?错误消息没有告诉我错误可能发生在哪里。任何想法都会有所帮助...

代码:


"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz", "react-native-svg": "9.5.3", "react-native-svg-charts": "^5.3.0",

在此处输入图像描述

更新:

认为已经找到了错误的根源。里面node_modules>react-native-svg>elements>Path.js>Path>render有一个道具“d”的要求——上面写着:

0 投票
1 回答
640 浏览

react-native - 如何在 React Native StackedAreaChart 上应用渐变颜色?

我正在使用这个库来制作StackedAreaChart. 它目前正在工作,但我需要将颜色更改为渐变。此包中提供的示例仅在AreaChart.

这是我的代码

你能在这方面给我一些帮助吗?

编辑

在此处输入图像描述

0 投票
1 回答
476 浏览

react-native - 如何在 React Native 中使用 StackedAreaChart 添加 XAxis?

我正在使用这个 React Native包来制作一个StackedAreaChart. 它正在工作,但我无法使用标签添加 XAxis date

这是我的代码

你能帮我解决这个问题吗?

编辑 在@Wiliam Brochensque Junior 的帮助下,我能够渲染 XAxis

0 投票
0 回答
38 浏览

react-native - 在 React Native 中使用 StackedAreaChart 时如何更改数据格式?

我正在使用react-native-svg-charts制作StackedAreaChart,这是我正在使用的数据格式

我面临的问题是,我不会总是date为所有 4 个条目获得相同的值,例如

我试图把undefined,但我有一个错误。

我该如何处理这种类型的变化?

0 投票
1 回答
1744 浏览

firebase - 如何使用本机反应绘制 Firebase 数据的实时图?

我是 React Native 的新手,我正在尝试在 Firebase 实时数据库中绘制实时数据图。

这是我的数据库结构:

在此处输入图像描述

我正在尝试使用“react-native-svg-charts”绘制折线图,​​其中 X 轴具有日期值,Y 轴具有“睡眠”值 - 添加新节点时也会更新。

我可以从 firebase 获取所需的数据并将其附加到相应的数组中。

睡眠者: 睡眠者 约会者: 日期

当我使用静态数组并对值进行硬编码时 - 我能够正确绘制图形。 绘制的硬编码值

但是当我使用包含来自 Firebase 的快照数据和 on() 方法的 datearr 和 sleeparr 时 - 我只得到一个空白图(即使在 console.log() 中两个数组都是正确的)。 空白图表

我的代码:

谁能告诉我我做错了什么以及如何正确显示图表?(日期值是字符串也是一个问题吗?)

请帮忙。

@aman - 合并了此更改 - 但图表不显示:

0 投票
1 回答
1026 浏览

react-native - 如何在 React 原生 svg 图表中添加背景颜色?

我正在使用这个包来创建一个自定义的多个LineChart.

我面临的唯一问题是我需要在每个 2 y 值之间添加背景颜色(我确定只有 0 到 4 的值)。所以我必须在“0-1”、“1-2”和“2-3”之间添加一种颜色。

这是当前的结果

在此处输入图像描述

这就是我需要实现的

在此处输入图像描述

这是我的代码

我试图添加一个Rect我这样指定填充颜色的

它已添加,但我想要一个更通用的解决方案。

我希望你能帮我解决这个问题。

0 投票
1 回答
404 浏览

javascript - 在 react-native 中绘制折线图的最高效方式

我想知道以非常高的频率(每 15 毫秒新值)绘制具有流数据的实时折线图的最高效方法是什么。我通过 BLE 获取数据,并添加到我永远不会超过 500 个项目的数组中。我需要从这些数据中获得大约 10 个不同的折线图。

整个情况如下:*每15ms的数据流*我将它保存在redux存储中array[500](当有新元素时删除第一个元素并且array.length >= 500 *必须将数据显示为10个独立的折线图

我正在使用react-native-svg-charts,按预期工作,但是当有 500 个点并且第一个点正在改变(因为我正在删除它)时,图表会重新渲染本身并且整个视图变得滞后(~20fps)。

我想知道在这个场景中使用setNativeProps(on <Path />from react-native-svg) 会有所帮助,但我不确定它是否是最高效的方式。如果您有更好的想法和建议(例如使用react-native-art),请告诉我,我需要在此视图中拥有 ~60fps。

最好的

0 投票
1 回答
602 浏览

react-native - 如何减小模块 react-native-svg-charts 中 PieChart 的宽度

既然已经谢谢你想知道是否有人知道如何减小 Graph Pie 的宽度,为了让它变薄我在 svg 中尝试了一些属性,但没有任何人可以提供帮助

今天我有这个结果我想达到这个结果

当前的

在此处输入图像描述

预计

在此处输入图像描述

当前组件

0 投票
0 回答
45 浏览

javascript - 如何在嵌套对象获取函数中设置状态

我正在使用 react-native-svg-charts 动态显示收入和储蓄图表,当调用 onPress 函数时,我想更改当前状态的值,但我无法绑定上下文,所以这个.setState 未定义。如何绑定上下文以便 onPress 函数能够正确设置状态?

我的代码:

0 投票
1 回答
932 浏览

android - React Native 中的实时数据更新图表

我需要在 react native 中创建一个图表,它每 500 m/s 从本地模块获取数据(整数数组)并在实时更新中绘制它们,为此我使用了“react-native-svg”,我实际上可以更新图表,但性能非常缓慢,并且经常崩溃

结果数组最多接受 1800 个结果,之后图形滚动

在侦听器中从本机模块获取数据并更新数组,从本机模块我传递一个包含 60 个元素的数组,因为它每 500 m/s 需要 60 个元素(e.values 是 60 个整数的数组)

图表

我尝试了其他图表库,但它们都给出了相同的结果

PS对不起,如果语言不完美。