问题标签 [chartjs-plugin-zoom]

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

javascript - Chartjs 甜甜圈图圆角半甜甜圈

我正在为我的一个项目使用 chartJS 库,我需要绘制一个圆环图。甜甜圈图需要是一个半圆形,其中的部分需要有圆形边缘,如下图所示

在此处输入图像描述

我可以通过参考下面的代码笔中显示的这个很好的答案来实现一个完整的循环

带圆边的全圆codepen here

但是,如果我更改选项以使用以下选项绘制半圆

然后计算似乎在某处出错并且圆弧被随机放置,如下所示

问题代码笔在这里

我怎样才能解决这个问题。请帮忙。我被困住了。谢谢

0 投票
1 回答
63 浏览

javascript - Chart.js:我可以更改 chartjs-zoom-plugin 中的“OriginalOptions”变量吗?

我有一个图表,每分钟更新一个新数据点。这个图表也使用了chartjs-zoom-plugin来让用户放大。我的网页上有一个按钮调用了chart.resetZoom()函数,让用户可以快速一直放大,但它只是放大超出图形的原始范围。例如,图表以 100 个数据点开始,一旦更新到 101 个数据点并且用户单击按钮,图表将重置以显示 0-100 而不是 0-101 的数据点。

查看 chartjs-zoom-plugin 源代码,它看起来像在用户启动他们的第一次缩放/平移时调用了“storeOriginalOptions()”函数,并为“resetZoom()”函数存储了原始最小/最大数据点参考它应该缩小到的位置。当我添加新数据点时,有没有办法更新它,所以 resetZoom() 会一直缩小以包含新数据点?

0 投票
0 回答
121 浏览

chart.js - chartjs-plugin-zoom:鼠标在轴上方时单独的 x 轴和 y 轴缩放

使用chartjs-plugin-zoomChartJS 的 -plugin 当用户在轴上方滚动时,我试图将 x 轴和 y 轴缩放分开。我无法让它工作,我现在想知道这是否可能。我希望这可以通过overScaleMode-argument 实现,如下面的配置所示。这没有做出适当的改变。

如何实现这种缩放行为?

作为替代方案,我正在考虑在图形之外添加按钮以打开或关闭缩放方向。或者这些类型的按钮是否已经在软件中实现(或通过另一个插件)?

0 投票
1 回答
33 浏览

javascript - 如何仅显示 xaxis 标签o 数据点并隐藏所有其他数据点?

我有一个 chartjs 折线图要求,客户要求仅在有数据点时才在 x 轴上显示标签。请在下面找到他的模型。

在此处输入图像描述

x轴是时间,这就是我得到的。

在此处输入图像描述

我怎样才能做到这一点?

这是我的配置。

0 投票
1 回答
588 浏览

javascript - 如何停止chartjs缩放超过可见点?

如果选定区域中没有点,我可以限制 chartjs 停止缩放吗?请在下面找到图片。

在此处输入图像描述

如您所见,xaxis 上的两点之间有一个月的差距,如果我尝试放大那里,它会一直持续下去。找到下面的图片。

在此处输入图像描述

我不希望它发生。当用户尝试放大某些点时,我希望图表停止放大这两个点。一个在最左边,另一个在最右边。

我的图表配置如下:

0 投票
0 回答
473 浏览

javascript - chartjs-plugin-zoom 在缩放后更改时间格式和比例

我在 bootstrap-vue 上使用 chart.js 和 chartjs-plugin-zoom:

  • “chart.js”:“^2.9.4”
  • “chartjs-plugin-zoom”:“^0.7.7”

绘制图表时,格式正确显示 'HH:mm': ok 使用缩放后,格式被清除为 'hh:mm a' 并重置比例尺: 不正常 我怎样才能避免这种情况或我做错了什么?

chart.js 的代码选项:

0 投票
0 回答
69 浏览

typescript - 使用 chartjs/chartjs-zoom 插件放大/缩小和平移时,X 轴比例与图形不同步

charjs-zoom-plugin 版本:0.7.7 和 chartjs-2.9.2

在进行放大/缩小(使用滚动条)和平移(鼠标拖动)时,与图形移动方向相比,x 轴刻度的缩放方向相反。知道为什么它会这样。任何帮助或建议都有帮助。

在此处输入图像描述

0 投票
1 回答
188 浏览

javascript - Chart.js v3 使用缩放插件实例后保留在内存中

我最近将 Chart.js 从 v2.x 切换到 3.x。我还使用与 v3.x 版本兼容的 chartjs-plugin-zoom 1.0.1。我的情况是,我有带有一些选项卡的 SPA,一个选项卡上是图表,它们之间是折线图,为此我使用缩放插件,因为数据通常很大。我的选择看起来像

当我从带有图表的页面转移到另一个页面时,这被称为清理:

我希望破坏从记忆的角度做所有必要的事情。对于版本 2,它正在工作,但在这里我观察到奇怪的行为。当我从图表页面切换到另一个页面并检查内存时,我看到对象之间的 LineController(与 chart.js 关联的对象)。当我切换回图表页面,然后再次切换到 LineController 的另一个内存消耗和计数时。 提高实例

我发现的是,当我从选项中评论缩放插件时

一切都恢复正常,不再增加 LineControll 实例,在页面切换之间没有可见的内存消耗增加。但是这个插件对我来说是必需的,所以注释掉不是一个好的选择。我尝试将图表的插件手动设置为空:

但这并不能解决内存问题。有人遇到过这种情况吗?

0 投票
0 回答
38 浏览

javascript - 在 chartjs 中包含 chartjszoom 后将无法缩放

包含正确版本的 chartjs 和 chartjs-plugin-zoom 后无法缩放。

这是我的画布标签

我的图表 js 函数中的插件选项

我知道我有正确的版本,因为我用另一个 HTML 文件对其进行了测试。我认为问题可能是 chartjs-plugin-zoom 无法在一个图表中处理多个数据集,但测试 HTML 工作得非常好。我不知道哪里出了问题。