问题标签 [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 投票
0 回答
136 浏览

javascript - React Native 聊天工具包中的条形图设计

我正在使用 React Native 聊天工具包中的 BarChart

我想实现以下设计 在此处输入图像描述

到目前为止,我已经达到了这一点,但仍然无法完全实现.. 在此处输入图像描述

请帮助我进行实际的酒吧设计

这是我的代码

//配置

};

0 投票
0 回答
40 浏览

javascript - 如何使用垂直光标 React-Native-Chart-Kit 在图表上创建和跟踪值

我使用 react-native-chart-kit 构建了一个图表。我不想使用任何可靠的数据点,所以我设置了它,setDots={false}所以它只是一条干净的线。我正在尝试创建一个垂直光标来跟踪行值并创建一个工具提示来显示值是什么。我正在尝试使用该onDataPointClick功能,但它不起作用 - 我假设它必须为此使用点。

反正有能力吗?

0 投票
1 回答
132 浏览

reactjs - 带有反应原生图表套件的不同颜色折线图

我正在使用react-native-chart-kit插件,如果超出蓝色区域,我想画一条用绿色和红色填充的线,如图所示。谁能说这是否可能,如果可以,我该如何实现?

线图小吃 在此处输入图像描述

0 投票
0 回答
38 浏览

javascript - 从反应原生图表工具包中的对象获取数据

我试图在折线图中显示的示例数组,我如何使用tempatur作为y 和zeit作为 x?:

0 投票
0 回答
113 浏览

typescript - 有没有办法在 ReactNative 的图表套件中添加 x 和 y 轴标签?

有没有办法将 x 和 y 轴标签添加到 ReactNative Chart 套件中的折线图?例如,在这个用 python 生成的图表中,您可以看到 x 和 y 轴标记为“Year”和“Employees”:在此处输入图像描述

但是,当我在 github 上查看 chart-kit 中的折线图时,似乎没有明显的方法可以使用 react-native 和 typescript 为我的工作添加类似的标签。折线图有一个 yAxisLabel 和 xAxisLabel 属性,但它似乎只是将我选择的任何标签添加到图表的每个单独段,导致标签一遍又一遍地重复。这不是我想要的。

有没有办法使用图表工具包的内置属性创建我正在寻找的标签?请告诉我!谢谢!

折线图chart-kit github链接:https ://github.com/indiespirit/react-native-chart-kit#line-chart

我正在使用的代码:

0 投票
0 回答
26 浏览

javascript - react-native-chart-kit 的 onDataPointClick 在网络上不起作用。适用于安卓

我在一个世博项目中使用 react-native-chart-kit 来绘制数据。

我已经设置 onDataPointClick 如下 - 和 Expo 小吃在这里展示了错误:https ://snack.expo.dev/@warm__tape/react-native-chart-kit-test

单击已成功登录到 android 中的控制台。网络中什么也没有发生。不确定是什么问题?

问题演示的完整 app.js:

0 投票
0 回答
22 浏览

javascript - React Native moment.js 查找日期范围内的元素总和,否则返回 0

我正在使用 react native 图表工具包,我希望能够在我的 react native 应用程序中显示支出图表。我正在使用 moment.js 和 moment-range

过滤器自身返回正确的项目,每次一个或多个对象落在范围内时,它应该传递给 reduce 函数以添加它们。

没有减少返回的对象(没有任何内容的日期意味着当天没有支出)这工作正常:

减少item.spent值后返回的数据,这就是问题所在:

0 投票
0 回答
26 浏览

react-native - React Native Chart Kit 中“xAxis”上标签的控制间隔

我根据react-native-chartkit用户的体重数据创建了一个折线图,该数据在一段时间内会发生变化。我正在尝试可视化权重条目之间的适当时间间隔。有谁知道是否可以控制 x 轴上标签之间的空间以可视化适当的时间间隔?现在我只能以相等的间距显示它们

0 投票
0 回答
17 浏览

react-native - 无法在 react-native-chart-kit 中使用动态数据

我试图渲染从 firestore 获取的数据并将它们显示到 react-native-chart-kit 中。但是,我总是面临以下错误:

无效编号:M0,0 L-Infinity,181 L64,181

我通过这个函数从数据库中正确获取了数据:

所以,我得到了包含正确数据的数组。

然后,我将数据推送到以下状态:

当我尝试将数据显示到如下图表时,出现无效数字错误