问题标签 [nivo-react]

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

javascript - nivo 图表线仅出现部分

我的 Nivo 线路秀只结束了部分线路。

当我将鼠标悬停时,数据肯定在那里,我可以看到数据。

但我不确定为什么它只显示一点点。

在此处输入图像描述

这是线路设置..

有人有同样的问题吗?

请帮我..

0 投票
1 回答
741 浏览

css - React Nivo 虚线

我正在尝试创建一个反应 nivo 折线图,用虚线而不是实线。我已经研究过模式,但我不知道如何制作一个。任何帮助表示赞赏。

0 投票
1 回答
554 浏览

javascript - Nivo ResponsivePie 没有响应

我正在尝试复制Nivo Size Pie,当您将鼠标悬停在一块饼上时,该块会根据activeOuterRadiusOffsetactiveInnerRadiusOffset值放大,但是在这种情况下,悬停在一块上的大小不会改变。我在 github 上看到一个关于图表无响应的问题,人们使用 AutoSizer 但复制导致我出现空白屏幕。

编辑:我有一个代码副本,它似乎在代码沙盒上正常工作,但在我的应用程序中却没有。

0 投票
0 回答
90 浏览

javascript - 图表上的 Nivo OnClick 显示元素

我需要找到一种方法来通过单击一个栏来呈现 Nivo 图表上的任何 html 元素,只要它显示,显示的内容并不重要

这是我在第 76 行尝试过的:

onClick={(数据) => { 返回(

你好世界

) }}

这是沙盒:https ://codesandbox.io/s/nivo-bar-clicked-ewtks?file=/src/index.js

先感谢您

0 投票
0 回答
60 浏览

javascript - 无法在移动设备上使用 Nivo 工具提示或十字准线可拖动性

我正在尝试使用 Nivo 创建一个使用十字准线和工具提示的折线图。我能够在桌面上让一切正常工作,但在移动设备上,当我尝试用手指拖动图表时,什么也没有发生。只有当我点击时才会出现十字准线和工具提示。

这个可拖动的功能正在使用 react-vis,但由于各种原因我需要离开它。

有什么建议或帮助吗?

0 投票
0 回答
140 浏览

javascript - Nivo lib 在悬停时显示一个点

我正在发现用于数据可视化的 Nivo lib,并且我正在阻止我想要实现的功能。

这是我想做的一个例子:https ://nivo.rocks/line/

我想制作一个具有几乎相似渲染的组件,除了:曲线应该没有点出现。然后,将鼠标悬停在曲线上,仅显示您悬停的点,当我们将鼠标移动到其他地方时,前一个点消失,为下一个腾出空间

显然,lib 本身不能管理,我们可以使点消失/出现,但只有全部或没有,而不是单独管理它们。

如果您有任何我感兴趣的建议,请提前感谢您的帮助!

0 投票
3 回答
54 浏览

javascript - 我需要将我的对象数组转换为一个具有特定键的对象

下午好。我想显示一年中的月份以及在每个类别中花费的金额。前任:

我从我的服务器获取所有月份的对象数组。像这样的东西:

我创建了一个过滤月份的函数:

我用它来分别获取月份:

当我调用 console.log(janData) 我看到这个:

我想从包含月份数据的数组中(janData、fevData 等)创建一个像这样的对象:

并且这些值将由数组的值填充。我试图创建一个函数来接收monthData作为参数,然后使用索引(例如:food:monthArgument [3] .price),但我得到“无法读取未定义的价格”。我进行了一些搜索,但找不到回复。拜托,我被困在这里,有人可以帮助我吗?

这个问题似乎并不重要,但我正在使用 React、Node、mySQL、Nivo/barChart

0 投票
0 回答
65 浏览

javascript - 有没有办法让 Nivo 十字准线和工具提示直接与 x 轴对齐?

我正在尝试创建一个股票图表,目前图表中有很多起伏,但是 Nivo 具有这种网格功能,它与 x 轴对齐的程度不大。有什么方法可以得到一个图表,几乎超过 500 个 x 和 y 点,十字准线和工具提示直接排列鼠标的 x 值在哪里?

这是一张图片(点是我的鼠标所在的位置): 图表

0 投票
0 回答
104 浏览

reactjs - Nivo Bullet 自定义范围工具提示不起作用

我正在使用文档中提供的片段自定义 nov/bullet 图表的范围组件。

该图表呈现良好,但我正在努力让工具提示适用于范围。我已经尝试导入@nivo/tooltip 并覆盖(如下所示)onMouseEnter、onMouseMove 事件,但仍然没有运气。还刚刚注意到上面的故事书示例没有工具提示工作。

我试图附加到事件的功能:

任何指针都非常感谢。

0 投票
0 回答
70 浏览

javascript - nivo 散点图 -> 如何以编程方式显示所有工具提示

我目前有一个带有自定义工具提示的工作散点图组件,效果很好:

现在,我想添加一个切换按钮来一次显示/隐藏所有工具提示,以使可视化更容易/更好的可读性,但我不知道如何处理它?似乎没有任何设置可以允许这样做,至少从我发现的情况来看是这样。我也不知道如何遍历散点图中的所有节点以手动添加 html 对象。

因此,我们的想法是有一个切换按钮来显示/隐藏所有工具提示。