问题标签 [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 回答
253 浏览

chart.js - 当 ChartJS 中没有重叠数据时,以全宽渲染来自多个数据集的条形图

内的例子。作为参考,我使用的是最新版本的 ChartJS (3.2.1) 和最新版本的 react-chartjs-2 (3.0.3)。

我想知道如何在给定多个不同数据集的情况下以特定方式显示我的条形图。我希望图表上的条以标准宽度呈现,同时在必要时允许并排重叠。

当您使用一个数据集时,ChartJS 将以我的“理想”方式处理这个问题,该数据集可能有两个值落在同一个 X 轴坐标上,但在使用多个数据集时我似乎无法模仿这种行为。

似乎每当两个数据集共享一个轴时,条形宽度要么调整以适应两组数据,即使它们不占用相同的空间,或者它们在它们应该占用相同空间时堆叠在一起。我的目标是只在必要时让条“缩小”它们的宽度,否则保持它们的全宽。

这是我希望看到的多个数据集的示例(这就是 ChartJS 在有一个带有barThickness: "flex"集合的数据集时处理渲染的方式):

在中间,您会注意到条形宽度自动调整为彼此腾出空间。 ChartJS 条形宽度,单个数据集

这是我使用两个没有任何重叠点的数据集时得到的示例(barThickness: "flex"两者都设置了): ChartJS 条形宽度,多个数据集

最后,这是一个使用两个数据集时有一些重叠点的示例: 在此处输入图像描述

到目前为止,我什至找到解决此问题的唯一方法是创建多个 x 轴,一个用于一个数据集,一个用于另一个数据集,一个用于重叠。然后,通过操作我的数据结构,为每个轴创建数据集,其中包含与所需条形宽度相对应的数据点。

这当然是一个解决方案,但我正在处理一个生产代码库、数千行数据和几个额外的数据集(所有这些数据集都有不同的状态、可见性条件和规则)。像这样一起管理所有这些几乎是不可能的,更不用说以可维护的方式了。我已经浏览了绝大多数 StackOverflow 问题和 ChartJS 文档,试图找到一个更清洁的解决方案,但到目前为止还不够,希望能得到您的帮助。

以下代码的简化版本。我已经包含了一些未使用的零碎(大部分被注释掉)只是为了展示我迄今为止尝试过的东西:

0 投票
0 回答
42 浏览

javascript - 是否可以隐藏 react-chart-js2 中图表上显示的悬停值

我已经使用 react-chartjs-2 库实现了一个饼图。当我们将鼠标悬停在图表上时,我在显示/隐藏工具提示时遇到了问题。

它与从 UI 端传递的虚拟数据类似地显示: 在此处输入图像描述

我不想No Data在图表悬停时显示工具提示。如果它可以为每个状态变量隐藏,或者只是为No Data. 两者都可以服务于我的目标。我不确定因为它可以显示/隐藏哪个对象。有人可以帮我隐藏工具提示吗?

0 投票
1 回答
994 浏览

javascript - 如何使用 typescript 和 react-chartjs-2 声明插件选项

(我刚开始学习打字稿,所以我敢打赌这对于熟悉打字稿的人来说是微不足道的)

我有一个带有以下代码的图表(为简洁起见,我已删节):

Typescript 将optionsprop 标记为错误: 在此处输入图像描述

错误消息的一部分:

所以我转到 index.d.ts 文件,并找到options.plugins定义类型的位置:

据我了解,我被困住了。我不认为我可以更改type.d.ts文件,我不明白上面代码中的注释在指导我做什么。

谁能建议打字稿接受我的代码需要什么?

0 投票
1 回答
60 浏览

chart.js - 在堆叠折线图中,有没有办法堆叠多个 Y 轴以匹配每条图形线?

堆叠 Y 轴示例

我无法在 Chart.js 中找到一种方法来让 Y 轴像示例图片中那样堆叠。

当我像这样保持比例对象简单时:

我显然得到一个 Y 轴,但不是缩放到任何数据集的最大值,而是似乎将每个数据集相加(例如:假设任何集合的最大温度为 40°C,如果我有 6 个数据集 Y比例从 0 - 250)

加法 Y 轴示例

它确实很好地堆叠了所有的线条,所以我真的希望有一个像样的解决方案,因为 Y 轴现在对观看者没有帮助。谢谢你的帮助!

0 投票
0 回答
60 浏览

charts - React chart js极坐标图轴默认值

我正在尝试将图形默认大小设置为 100,而不是最大元素值,我应该使用什么属性?

我目前的图表

我试过这样的事情:

0 投票
1 回答
424 浏览

reactjs - 如何使用功能组件在浏览器中打印 react-chartjs-2 条形图?

这是条形图的示例。我想在浏览器中打印此条形图,因为我尝试了 react-to-print 但它会抛出错误,例如 react-to-print 仅适用于类组件。

0 投票
1 回答
424 浏览

reactjs - 【React chart.js】如何使用地图功能向雷达图添加多个数据

我试图弄清楚如何使用地图功能将多个数据放入雷达图。我选择了一些相关的代码如下。

我正在使用 react-chartjs-2。当它在 MotivationtypeChart 组件上调用 this.props.scores 时,该错误反复出现意外关键字“this”。首先是不允许在 datasets 数组中使用 map 函数吗?或者有什么办法可以解决这个问题?我真的很感谢像这里的人这样的熟练程序员的建议。

0 投票
0 回答
46 浏览

javascript - 如何使 Chart.js 仅显示数据数组对象中的最后一项?

不确定标题/问题是否足够具体,以便你们了解我需要什么:)。我们有数据显示折线图上的每日点击量。所以有时会有很多点,因为选项之一是为图表视图选择“所有时间”,在这种情况下,我们有看起来像一个更宽的圆圈/点(见附图),但它实际上是同一天两到三点。因此,我们的想法是限制数据每天只显示最后一项(如果多于一项)。

在此处输入图像描述

所以我想知道的是,有没有一种方法可以使用现有属性进行设置,如果没有,我们该如何实现?

谢谢!

0 投票
1 回答
240 浏览

javascript - 在chart.js的甜甜圈图上显示每条弧线的值

这是我当前的圆环图,我想在弧线本身上显示每条弧线的值。

这是图表的配置。

Ps 我知道有一个非常相似的问题,我已经尝试了该线程中提到的解决方案,但我认为当前版本的 Chart.js 不再存在该解决方案。

0 投票
0 回答
35 浏览

javascript - 在chart.js的甜甜圈图上显示每条弧线的值

这是我当前的圆环图,我想在弧线本身上显示每条弧线的值。

这是图表的配置。

Ps 我知道有一个非常相似的问题,我已经尝试了该线程中提到的解决方案,但我认为当前版本的 Chart.js 不再存在该解决方案。