问题标签 [react-chartjs-2]

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

javascript - 如何在单击按钮时平移?

我正在使用 react-chartjs2 来显示我通过使用 chartjs-plugin-zoom 制作的可水平滚动的图表。我不想通过拖动鼠标而是通过单击按钮来平移图表。我检查了插件的代码,我猜想在单击按钮时调用 doPan() 函数,我将能够向右/向左移动。

上面的代码是我在响应中用来启用图表平移的代码。任何想法将不胜感激。

在下图中我可以使用鼠标拖动,我想在左右添加一个按钮,用于在图表上平移。

在此处输入图像描述

0 投票
1 回答
140 浏览

javascript - 如何防止 Chartjs 工具提示回调返回相同值的多个实例?

我正在使用带有 React 的 Chartjs。我有一个包含三个数据集的加密货币价格图表,其中一个是价格列表,一个是与初始价格相切的水平线,另一个是与最高点相切的水平线。他们来了:

我正在尝试创建一个功能,该功能可以根据您在图表上的位置更改另一个组件中显示的价格。这是标签选项中的回调函数:

现在这可以像预期的那样工作,除了它运行了 3 次并且返回的项目用三个实例填充了工具提示。我想这是因为我有三个数据集。我将如何防止这种情况并且只调用一次道具回调并仅用一个值填充工具提示?我想还有一个轻微的帧速率故障是由这个引起的。

0 投票
1 回答
848 浏览

reactjs - 删除图表 js 的 x 轴上的重复值

我有一个 X 轴,它显示月份。然而,在 8 月份,它显示了两次……我不确定为什么会这样。我想删除 x 轴上重复的 Aug-2020。

这是我创建的一个编码沙箱来说明我的意思。

0 投票
0 回答
391 浏览

reactjs - 在 React 中创建圆环图

我在我的反应项目中创建了一个示例甜甜圈。现在我要做的是在图表的中心添加动态内容。我在互联网和 youtube 上进行了搜索,但找不到与此相关的任何文档。如果可以,请让我知道一种方法。我的代码如下。

0 投票
1 回答
39 浏览

javascript - 如何创建具有许多条的 charjs 条形图?

我想得到这样的效果:

在此处输入图像描述

这是我作为组合图的最佳尝试: 在此处输入图像描述

问题是我需要大幅增加此图表中的条数。但是,当我尝试这样做时,条形消失了。

这是我作为打字稿 reactjs 设置的代码:

如果换成data: decimatedDataToBars(decimatedData),data: decimatedDataToBars(chartMappedFollowersData),可以看到效果;条形消失。有没有人对这个问题有任何见解以及如何解决它?

0 投票
1 回答
138 浏览

reactjs - 如何在 react-chartjs-2 中操作数据

我想在 y 轴上显示带有特定货币符号的数据,如工具提示中的突出显示区域。我已经自定义了工具提示,但提供给图形的动态数据不受我控制。在此处输入图像描述

这是我尝试过的代码

0 投票
1 回答
108 浏览

node.js - react-hooks/exhaustive-deps 用于 react chartjs 2 的图表数据

我正在使用 react chartjs2 来显示折线图。并且图表的数据在useEffect中更新。图表显示数据。事情正在发挥作用。但我得到这个钩子排气部门规则警告:

第 51 行:React Hook useEffect 缺少依赖项:'chartData'。要么包含它,要么移除依赖数组 react-hooks/exhaustive-deps

但是,如果我添加状态图表数据,那么页面会冻结,因为我认为它会进入无限循环。数据可能会不断调用。代码是:

0 投票
1 回答
868 浏览

node.js - 如何在chartjs v2中为相同的x轴在y轴上绘制多条线?

我在数据库中有时间序列数据,如下所示:

我可以通过将平均值从数据库中提取为数据点来使用平均值绘制折线图,​​例如:

我想要实现的是分别使用相同的数据集为 min、max 和 avg 绘制三条线:

我试过在这里查看文档和许多问题,但没有找到线索。我可以分离数据集,但通常我在后端处理大量数据,并想看看是否可以在没有任何进一步处理的情况下完成。想知道这是可以实现的还是 chart.js 的限制?

0 投票
1 回答
72 浏览

javascript - React Chart.js BarGraph 未更新

我正在尝试使用 实现条形图react-chartjs-2,但在将数据传递给它时遇到了一些问题。

如果我在调用图形时直接声明数组,它可以工作:

第一种方式

但如果我尝试类似:

图形无法正确呈现:第二种方式

这是 BarGraph 组件:

提前致谢。

0 投票
1 回答
4520 浏览

javascript - 如何在 react-chartjs-2 中的饼图图例中显示值

我正在为我的仪表板使用 react-Chartjs-2 饼图。根据要求,我必须在图例中显示带有数据的两个标签。我在我的应用程序中使用的以下组件

现在我得到的图表如下所示 我的输出 我的要求是在图例中添加值(自定义图表图例)。示例图像预期输出