问题标签 [chart.js3]

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 投票
1 回答
22 浏览

javascript - chart.js 从混合图表中删除较低的网格

我有一个混合图表(散点图和折线图),因此我需要 2 个 xAxis。

图表底部出现了一个额外的网格,因为这是另一个 x 轴通常有标签的地方(我删除了它们,因为我不需要它们)

我试图摆脱那个额外的网格,但我找不到如何去做。我试图将刻度颜色指定为白色,但网格仍然存在。

看图像,它是底部那个单独的额外网格(标有水平括号):

在此处输入图像描述

这是我的代码:

Chart.js 版本为 3.6.2

任何帮助/解决方法将不胜感激。问候!!

忘了提我说的轴是 'x' (xAxisID: 'x')

0 投票
2 回答
127 浏览

javascript - 如何在 Chart.js 中使用气泡图修复混合图表的大小?

我正在实现一个图形,它bubblebar使用Chart.js 3.7.0.

为了防止canvas调整大小,我将大小值保存在canvas标签中并修改选项值如下。也就是说,我们希望canvas具有固定大小。

HTML 标记

选项

但是,如果您修改图表的值y,大小会发生如下变化。rbubblecanvas

bubble图表中的值为0, 0,20

在此处输入图像描述

bubble图表中的值为0, 80,50

在此处输入图像描述

这是绘制上述图表的完整源代码。

即使值更改或值更改,如何将其修改canvas为固定大小?canvasbubblebar

即使数据集中的值发生变化,我也希望canvas使用固定的1320px宽度和685px垂直值进行绘制。

0 投票
0 回答
34 浏览

chart.js - 如何在 Chart.js 中为图形区域设置固定高度

我需要创建多个图表,其中图表区域的高度完全相同(但其他图表元素的高度可能会有所不同)。

什么样的方法可以用来实现这个功能?

默认情况下,Chart.js 旨在在绘制元素时填充画布高度,这使得图形区域高度依赖于画布高度和其他图表元素,如标题高度和图例高度。

这个问题已经在 Chart.js GitHub ( https://github.com/chartjs/Chart.js/issues/3458 ) 上讨论过,开发人员似乎同意这个功能应该由自定义插件而不是核心来处理反正图书馆。

我有点失落。到目前为止,我已经尝试在 beforeFit 和 afterFit 挂钩中修改 y 比例高度、maxHeight、填充、边距等,但这些似乎没有做任何事情。我只是似乎不了解源代码中如何处理高度设置以及如何覆盖它。

0 投票
1 回答
33 浏览

javascript - 如何使用 Chart.js V3.7.0 中的原始数据集格式在 Y 轴上显示“空”值数据?

我想知道是否有办法NullPrimitive Dataset中显示或附加值。

到目前为止,这是一个简短的代码解释,说明我的代码实际做了什么,以及我如何尝试实现同样的事情,但没有成功。

PHP 代码我使用 php 将我拥有的一些数据格式化为正确的格式 Primitive dataset documentation):

我使用此变量的图表脚本:

问题

如何在不破坏图表的情况下在图表上附加of type等于的数据?Null(术语中断,我的意思是当我有至少一个空值时,图表根本不显示值)。

提前感谢您的时间和精力。库被调用Chart.js,库的版本是3.7.0.

0 投票
1 回答
52 浏览

javascript - 如何制作整体Chart.js V3.7.0 中的元素在悬停时将光标显示为指针?

当我将鼠标悬停在它上面时,如何使我的canvas元素显示光标样式。pointer

HTML

我都试过了:

和:

但没有运气。

图片:

在此处输入图像描述

总而言之,我希望光标的样式等于整个图表上的指针,而不仅仅是图片中的红点。(红点周围有黄色,是我希望光标看起来像指针的点的一个例子。)。

提前致谢!

0 投票
1 回答
26 浏览

chart.js - 在容器中垂直对齐甜甜圈/饼图

我有三个并排的甜甜圈图,如下所示: 在此处输入图像描述

问题是,图表之间的项目数量不同,导致图例具有不同的高度,进而图表不对齐。是否可以将图表与容器顶部对齐?

0 投票
0 回答
25 浏览

vue.js - 将数据添加到折线图(带有 Vue.js 的 chart.js)会导致“递归过多”错误

我将 chart.js 与 vue.js 一起使用。我有一个折线图,我想添加数据(稍后由 SSE 自动添加)。我修改了另一个示例,但错误仍然相同。它在调用 this.moonData.push(或 this.testData.datasets[0].data.push)时“崩溃”。它必须与moonData的ref()有关。当我只使用非参考版本时,推送成功,但图表没有更新。顺便说一句,推标签成功

我正在使用 chart.js@3.7.0, vue@3.2.29

在火狐中:

在铬:

有任何想法吗?

0 投票
1 回答
15 浏览

chart.js - How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0

I was wondering is there an option that can make data points being displayed like this: enter image description here

and if yes, what is the option's name for xAxis?

0 投票
0 回答
21 浏览

javascript - Chart.JS 部分

如何在我的图表中插入一个单独的部分(例如在两个部分之间)[见图]?

谢谢你的回答汤姆

补充:我正在使用 Chart.js3 在此处输入图像描述