问题标签 [victory-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 投票
2 回答
126 浏览

javascript - 如何将对象转换为对象数组?

所以我有一些状态是一个看起来像这样的对象

并且对象内的条目数量可能会改变,它可能有 3 个数组,它可能有 10 个。它需要是动态的,我必须将这些显示为计数(在饼图中),它接受的数据看起来像这样, data 是 JSX 标签内的道具

x 输出为名称, y 输出为数字(不是百分比,lib 为我计算出来)

我试过在这里使用一些例子,比如这个线程,但我就是不明白

对 ES6 语法的偏好 &如果你有兴趣,我正在使用Victory作为我的图形库

0 投票
2 回答
4008 浏览

reactjs - 胜利图表背景网格

是否可以使用 Victory 图表显示这样的网格?

在此处输入图像描述

到目前为止,我只能在我的条形顶部获得一个带有垂直线和水平线的网格,如下所示:

在此处输入图像描述

0 投票
1 回答
1062 浏览

reactjs - 0-10 分钟时间范围内的 React Victory 折线图

可以使用一些帮助尝试使用 Victory 创建一个简单的折线图。

我正在尝试做的事情:

我基本上是在尝试创建一个显示过去 10 分钟随机数的折线图。我每 3 秒生成一个新的随机数,并将该随机数添加到折线图中。

所以 X 轴应该是从 0 分钟到 10 分钟,Y 轴应该是给定时间的实际 rand num。

我的主要问题是我对如何以 3 秒为间隔从 0 到 10 分钟创建 X 轴非常迷茫

到目前为止我所拥有的:

这是我到目前为止所做的代码沙箱,因此您可以尝试一下:https ://codesandbox.io/s/6wnzkz512n

主要Chart成分:


0 投票
0 回答
86 浏览

javascript - VictoryLine 图表中的自定义元素

我正在使用Victory-Native在应用程序中显示图表。在我的图表中,我有 2 条线。一个是无限的水平线,另一个是带箭头的。

对于我的问题,是否可以在 VictoryLine 组件中渲染一条带箭头的线?另外,此外,我希望在无限线下方有一个框(灰色)。

预期的图像是这个。

在此处输入图像描述

实际/当前结果:

在此处输入图像描述

0 投票
1 回答
369 浏览

reactjs - 在 X 轴的胜利图中仅显示开始和结束对象名称

我的要求是在 Y 轴上显示我的对象的所有详细信息,并在 X 轴上显示第一个和最后一个对象的详细信息(例如显示范围)。我的代码如下

根据上述代码显示的图形的当前显示如下

在此处输入图像描述

我只想在我的 X 轴上显示第一个日期和最后一个日期。我在这里想念什么?

0 投票
1 回答
1816 浏览

reactjs - 胜利 | 如何从最低的负 y 轴值显示 x 轴

我有一个图表来显示一些值,但是 y 轴有负值,如下所示。

它是这样显示的。

在此处输入图像描述

我需要将 x 轴设置为 y 轴的 -7 值。我怎样才能做到这一点?谢谢!

0 投票
1 回答
1587 浏览

reactjs - 在胜利图轴上强制设置一条顶线

尝试学习在项目中使用胜利图。鉴于下面的代码,它只显示 2,4 和 6 处的刻度线。数据上升到 7.6,所以我希望顶部刻度线 8 也出现。

我可以手动设置域大小,但范围可能有很大不同(例如季度结果与月度的图表),并且 Victory 可以自动确定合理的轴线,我不想重新发明它。我输入了 4 个滴答计数,但仍然只显示 3 个。

结果: 结果图,没有 8 行

0 投票
1 回答
1380 浏览

javascript - React VictoryBar style difficulties

So I'm trying to make a chart show some build data using Victory charts. However I'm getting some pretty annoying issues. The documentaion is pretty bad IMO... they're trying to cover to much ground as generically as possible.

Screenshot located here

Look at the above screenshot, the blue box is because I've got it highlighted in Chrome's dev tools.

  • The areas in boxed red. I can't see why they're there. Going further down, nothing is padding it out or using that space, how do I get rid of it?
  • How do I get the font size down to a readable level?

The below is where I'm at right now

I've tried editing the material theme directly to adjust the font size, to no avail. I've also tried creating my own theme but I can't get my head around that...

0 投票
3 回答
3629 浏览

javascript - 胜利堆栈中水平条的间距和大小?

我有一个简单的 3 部分水平条形图,如下所示:

在此处输入图像描述

您可以在CodeSandbox上查看或试用代码:

我有两个部分的问题:

  1. 我怎样才能使这 3 个条的高度更高(我在技术上猜是宽度,因为我把它做成水平的)?
  2. 如何在每个条之间添加一点间距?意思是红色、橙色和绿色条之间有 2px 的空间。

在查看VictoryStack文档和VictoryBar图表时,我尝试了很多东西,但我无法让它发挥作用。任何帮助将不胜感激,谢谢!

0 投票
2 回答
2630 浏览

react-native - 使用 VictoryChart 反应原生 flex 布局,图表适合父容器

我有以下渲染功能:

我在页面底部有某种图表,但我不能强制图表填充其父级,它有点从其专用部分溢出,我该如何实现?(我尝试使用flexWrap但没有帮助!)

这是它现在的样子的预览: 在此处输入图像描述

这是我的这个简单设计的样式表: