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

reactjs - 无法解析模块“@nivo/pie”的路径

我正在尝试使用Nivo Pie Chart,它在导入时给了我这个错误:

无法解析模块“@nivo/pie”的路径

试图弄清楚需要安装什么,任何帮助表示赞赏。

0 投票
0 回答
288 浏览

javascript - 有没有办法在 nivo 中以不同的方式缩放负 y 轴刻度

有没有办法在 nivo 中创建一个类似于图像上的图表?我需要以不同于正刻度值的方式缩放 y 轴上的负刻度值。正刻度步长要小得多,但比例应该相同。

不同的正负图

我尝试使用流图,但没有找到设置不同比例的解决方案。此外,流程图不显示从 0 开始的值。所以这更像是一个实心折线图,我需要将正部分与负部分不同地缩放。

这可以通过nivo库实现吗?

0 投票
0 回答
49 浏览

reactjs - Nivo 图表多种背景颜色

我想实现如下

在此处输入图像描述

我在 nivo 图表文档中没有看到任何选项。

0 投票
1 回答
1218 浏览

reactjs - Nivo 图表工具提示隐藏在其他图表后面

请参考这张图片

从图表中放置多个图表时,工具提示会隐藏在其他图表后面。此外,我正在为这张图片使用自定义工具提示,默认工具提示也以相同的方式显示。

0 投票
1 回答
1111 浏览

javascript - 如何在@nivo/条形图中显示 0 值,或者如果值为 0 来自 api,有什么方法可以显示无数据标签

我想在 Nivo 条形图上显示 0 值,当值为 0 时,它现在显示任何线,有没有办法在条形图中显示 0 值。如果图形线上的值为零,我们如何添加无数据标签?

图形图像

在上面的图片链接中,预算和质量保证百分比为 0,我想在此行不显示任何数据标签

这是代码:

0 投票
0 回答
498 浏览

javascript - 在 React 中将 nivo 图表/图表导出为图像

我正在为图表使用 nivo 库。我想将一些在内部使用的反应组件导出为 PNG/JPEG 图像ResponsiveBar。问题是库中没有内置此功能。我有这样的组件结构:

我需要一个将这种 React 组件作为参数并返回图像的函数。像这样的东西:

0 投票
1 回答
264 浏览

reactjs - 在 Nivo @nivo/ResponsiveLine 中添加一条平行于 x 轴的简单目标线

试图让这条灰线平行于 x 轴作为目标的标记(在 y 轴的 67% 处)。

在此处输入图像描述

0 投票
1 回答
913 浏览

reactjs - Nivo ResponsiveBar 中未显示数据的颜色

我的 React 应用程序中有一个ResponsiveBar组件,但颜色没有按预期显示。我已遵循官方文档中的指南。数据如下所示:

我将dataandkeys作为道具传递给ResponsiveBar. 目前条形图看起来像这样,颜色错误: 在此处输入图像描述

如您所见,数据中的颜色没有反映出来。

这是我的 ResponsiveBar 组件:

如何使数据中的颜色显示在栏中?

0 投票
1 回答
49 浏览

css - CSS 高度溢出问题

我使用图表库 Nivo(我也尝试过其他的,同样的问题)。我有一个内容如标题和统计信息的 DIV。但我不希望它像下面那样悬垂。为什么内容悬而未决?

在此处输入图像描述

0 投票
1 回答
748 浏览

reactjs - 为什么 Nivo 条形图中 Legend 的文本不显示

我正在尝试将此库用于 React 中的图表: https ://nivo.rocks/

我在水平柱形图(条形图)的文档中复制了完全相同的示例,但在我的环境中,图例根本没有显示。

我已经查找了之前发布的有关标签未显示和图例问题故障排除的所有其他问题。但这是一个不同的问题。它只是无法按预期工作/如文档实时预览中所示

CodeSandbox 显示问题: https ://codesandbox.io/s/missing-legends-text-pns6v

在此处输入图像描述