问题标签 [victory-native]

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

reactjs - 有没有办法在同一侧添加多个 y 轴但不重叠图表数据?

我正在构建一个支持多个 y 轴的折线图,我从 Victory 的文档中找到了展示,但中间的 y 轴与图表数据重叠。

https://formidable.com/open-source/victory/gallery/multiple-dependent-axes/

我想知道有没有办法在图表数据区域的最左侧或外部进行样式设置或制作?

当前来自 Victory 的样本: https ://jsfiddle.net/ngmikeng/5m73ktja/

这就是我想要的图表渲染:

在此处输入图像描述

0 投票
0 回答
38 浏览

reactjs - Victory Charts:深入研究 fixLabelOverlap 道具以获得反应图表的胜利库

我正在使用该<VictoryAxis>组件并传递fixLabelOverlap以防止标签重叠。然而,我面临着轴的某些宽度值的重叠(因为我正在测试响应行为)。
所以,我想知道 -
如何更改断点(如果有的话)以启动fixLabelOverlap魔法?
工作如何fixLabelOverlap?它如何检测重叠?

谢谢。
PS 仅针对上下文https://formidable.com/open-source/victory/docs/victory-axis#fixlabeloverlap
演示https ://user-images.githubusercontent.com/70627686/135725306-84ecb749-0998-44f7-939b-5fb5c793847b.mov

0 投票
0 回答
34 浏览

react-native - 如何使用 Victory 原生实现实用的烛台图?

所以,我尝试使用胜利原生来实现烛台图。我面临的一些问题是,无法显示部分数据并显示烛台的标签和专业图表中使用的其他东西。

作为参考,您可以查看此图像: 这里

0 投票
1 回答
30 浏览

react-native - 胜利图 - 值未正确对齐

我正在使用胜利聊天来显示基于时间的折线图。还使用散点图来显示点。

因为当我按下线条时我没有得到事件,所以我最终使用了散点图。

在此示例中,您可以看到值正确对齐 x 轴,图表线在星期六 30 停止。但实际结束时间应该是 Sunday-31

有什么方法可以使数据与此实现保持一致,或者请提出另一种方法。

在此处输入图像描述

0 投票
0 回答
29 浏览

victory-charts - 如何在 Victory (Native) Chart touch 上获得插值 X 值?

我正在构建一个类似于您在其他移动应用程序中看到的各种股票价格图表的图表,并设置了一个自定义 Cursor + Voronoi 容器。VictoryCursorContainer提供一个onCursorChange事件,它将为我提供触摸时的 y 值(日期时间),而不是 x 值(价格)。我可以通过搜索我的数据点来使用 y 值推断价格,但我想知道 Victory 是否提供了一种内置方法来实现更高性能?

onCursorChange还传递了一个props对象,该对象具有cursorValue包含此信息的属性,但似乎是先前的道具,包含来自先前光标位置的数据。

0 投票
0 回答
30 浏览

react-native - 胜利图和 React Native

在此处输入图像描述

我正在使用Victory ChartReact Native我需要Bar chart如图所示绘制。

在第二个上方label有一个icon,当悬停或单击该图标时,应打开tooltip自定义信息。

我怎样才能完成这样的图表?

0 投票
0 回答
91 浏览

javascript - React Native 饼图 - 想要显示图像(Victory Native)

我正在添加一个Victory 本机饼图以响应本机,并在其中显示一些附加信息。我能够在饼图中显示不同的颜色并能够在其中显示标签。

但我想要的是 - 我也想在饼图中显示图像。是否有任何解决方法或其他方法可以做到这一点?

在此处输入图像描述

0 投票
0 回答
15 浏览

javascript - 在 React 中扭曲的线性图表数据

我正在使用胜利库在应用程序中呈现线性图表。对于这张图表,我发送一个时间范围。但它仅显示半图表响应。

在此处输入图像描述

0 投票
0 回答
176 浏览

javascript - React Native:胜利原生 折线图

我正在尝试使用胜利本机库绘制胜利折线图。但总是坚持例外。我尝试了 3 天之久,但仍然无法解决此问题。我不知道出了什么问题。

我得到的例外如下:

TypeError: Array.prototype.map 要求 |this| 不能为 null 或未定义

此错误位于: VictoryLine (at savedStreamScreen.js:64) RNSVGGroup (at G.tsx:33) in G (at Svg.tsx:202) in RNSVGSvgView (at Svg.tsx:197) in Svg (at victory-container.js:136) 在 RCTView (在 View.js:34) 在 VictoryZoomContainer (在 savedStreamScreen.js:59) 在 VictorySharedEvents (由 VictoryChart 创建) 在 VictoryChart (在 savedStreamScreen.js:55) 在 RCTView (在 View.js:34) 在 View (在 savedStreamScreen.js:54) 在 SavedStreamScreen (在 SceneView.tsx:126) 在 StaticContainer 在 StaticContainer (在 SceneView.tsx:119) 在EnsureSingleNavigator (at SceneView.tsx:118) 在 SceneView (at useDescriptors.tsx:210) 在 RCTView (at View.js:34) 在 View (at Screen.tsx:63) 在 RCTView (at View.js:34) 在在屏幕(在 DrawerView.tsx:246) 在 RNSScreen (at createAnimatedComponent.js:165) 在 AnimatedComponent (at createAnimatedComponent.js:215) 在 ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147) 在 Screen (at ScreenFallback.tsx:37) 在RNSScreenContainer (at src/index.native.tsx:186) 中的 MaybeScreen (at DrawerView.tsx:240) ScreenContainer (at ScreenFallback.tsx:28) 中的 MaybeScreenContainer (at DrawerView.tsx:206) RCTView (at View.js) :34) 在视图中 (在 Drawer.tsx:561) 在 RCTView (在 View.js:34) 在视图 (在 createAnimatedComponent.js:448) 在 AnimatedComponent(View) (在 createAnimatedComponent.js:459) 在 ForwardRef(AnimatedComponentWrapper ) (at Drawer.tsx:553) 在 RCTView (at View.js:34) 在 View (at createAnimatedComponent.js:448) 在 AnimatedComponent(View) (at createAnimatedComponent.js:459) 在 ForwardRef(AnimatedComponentWrapper) (at Drawer .tsx:541) 在 PanGestureHandler (在 GestureHandlerNative.tsx:14) 在 PanGestureHandler (在 Drawer.tsx:532) 在 DrawerView (在 DrawerView.tsx:273) 在 DrawerViewBase (在 DrawerView.tsx:317) 在 GestureHandlerRootView (在 GestureHandlerRootView.android。 tsx:26) 在 GestureHandlerRootView (at DrawerView.tsx:316) 在 RNCSafeAreaProvider (at SafeAreaContext.tsx:76) 在 SafeAreaProvider (at SafeAreaProviderCompat.tsx:46) 在 SafeAreaProviderCompat (at DrawerView.tsx:315) 在 DrawerView (at createDrawerNavigator. tsx:126) 在 Unknown (at createDrawerNavigator.tsx:125) 在 DrawerNavigator (在 App.js:16) 在 EnsureSingleNavigator (在 BaseNavigationContainer.tsx:430) 在 ForwardRef(BaseNavigationContainer) (在 NavigationContainer.tsx:132) 在 ThemeProvider (在 NavigationContainer.tsx:131) 在 ForwardRef(NavigationContainerInner) 中(在 App.js 中:15) 在 App (由 ExpoRoot 创建) 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView (在 View.js:34) 在 View (在 AppContainer.js:106) 在 RCTView (在 View.js:34) 在在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ 的 reportException 中的 AppContainer(在 renderApplication.js:39)中查看(在 AppContainer.js:132) ExceptionsManager.js:171:19 in node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError in node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_039) 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在 node_modules/react-native/Libraries 的 handleException 中/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_039) 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在 node_modules/react-native/Libraries 的 handleException 中/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

警告:无法对未安装的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要解决此问题,请在 useEffect 清理函数中取消所有订阅和异步任务。在 tx.executeSql$argument_2 中的 components/database-connection.js:27:16 在 node_modules/@expo/websql/lib/websql/WebSQLTransaction.js:70:8 在 self._websqlDatabase._db.exec$argument_2 在 node_modules/ Expo-sqlite/build/SQLite.js:17:20 在 ExponentSQLite.exec.then$argument_0

0 投票
1 回答
131 浏览

reactjs - VictoryLabel 显示不在victory-native(React Native)中工作

在 VictoryPie 图表中需要使用 CustomLabel 显示 VictoryTooltip 和 VictoryLabel 但 CustomLabel 组件仅显示 VictoryLabel而不是 VictoryTooltip

VictoryTooltip 和 VictoryLabel 与直接使用labelComponent道具
示例一起工作正常: labelComponent={<VictoryTooltip />}labelComponent={<VictoryLabel />}

这是代码

这是没有显示工具提示的 ios 模拟器的屏幕截图 在此处输入图像描述