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

javascript - chartjs-plugin-zoom 不适用于我的 React 项目

我有一个使用“react-chartjs-2”库的反应组件来显示一些数据。带有数据的图表工作正常。我不能做的是使图表与'chartjs-plugin-zoom'插件一起工作。我不确定配置有什么问题。我在用:

“react-chartjs-2”:“^3.0.3”

“chartjs-plugin-zoom”:“^1.0.1”

这是css文件,以防万一。

有任何想法吗?

0 投票
0 回答
63 浏览

reactjs - 使用 chartjs-plugin-zoom 在时间戳 x 轴上水平滚动

在文档中,比例限制的参数是 min、max 和 minRange (max-min)。在我的项目中,数据会定期添加到数据库中,并且我希望图表在一定数量的点后开始水平滚动。我怎样才能做到这一点?min 和 max 不起作用,因为数据会随着时间不断向前移动。即使像“maxRange”这样的参数也不起作用,因为两天的数据可能同时出现,所以最近的时间戳 - 最旧的时间戳会产生负值。

0 投票
0 回答
56 浏览

angular - Angular + ChartJS 添加resetZoom 按钮

我添加了 chartjs 缩放插件,现在我想添加一个允许重置缩放的按钮。我看到的所有教程都使用了一个函数,仅在使用 chartjs 时效果很好。但是由于我的图表在一个 Angular 组件中并且在一个类中,我必须尝试 afaik 来访问一个方法。所以认为这将是与班级合作时的方式

我的结果是,即使没有按下按钮,它也会触发 resetChart。意思是我不能再缩放也不能平移/捏/拖动所以我试着像这样通过 ViewChild 调用它

父组件.html

父组件.ts

0 投票
1 回答
260 浏览

javascript - 如何在 ChartJS 中包含适配器和插件

将 Chart.js 与时间序列数据(需要像 moment.js 一样的适配器)和仅使用 CDN 的缩放/平移功能(chartjs-plugin-zoom)一起使用的最新(ES6)和最小方式是什么?你必须使用requireimport吗?

下面的代码将抛出与来自其他适配器和插件的缺失函数相关的错误。

0 投票
1 回答
377 浏览

javascript - 如何为图表设置初始缩放值(ChartJS + ChartJS Zoom 插件)?

我正在尝试创建一个包含过去 30 天数据的图表。但我想为小屏幕尺寸设置初始缩放值。因此,该图表将在移动设备上显示,而不是全部 30 个值,而是 5 或 10 个。我可以平移或缩小该图表的移动版本来探索所有数据。

如何使用 ChartJS-plugin-zoom 设置缩放的初始值?

谢谢!

0 投票
0 回答
194 浏览

angular - Chart.js 3.4.0 不适用于 Chartjs-Plugin-Zoom 1.0.1

在 Angular 上使用 Chartjs-Plugin-Zoom 1.0.1 和 Chart.js 3.4.0 会产生以下编译错误:

UpdateMode、ChartRegistry 和 Color 也有类似的错误。

请让我知道如何解决此问题。希望使用带有 Zoom 插件的 Chart.js 版本 >= 3.4。

0 投票
1 回答
139 浏览

javascript - Chart.js 在缩放后查找可见数据点

我正在尝试使用 chartjs-plugin-zoom 查找缩放事件后当前可见的数据点。以下示例我想出了以下 onZoomComplete 回调,但它不起作用。

一个直接的问题是它chart.data似乎不存在(使用console.log(chart.data)它时返回未定义)。与 x.minIndex和相同x.maxIndex......任何关于我做错了什么的想法将不胜感激。

下面是我如何设置图表(数据是 x,y 对的数组):

0 投票
1 回答
50 浏览

chart.js - ChartJS 缩放粒度

我正在使用的数据的“地板”粒度为“天”。任何更细粒度的(例如小时)都没有意义。然而,ChartJS 插件允许用户继续缩放到更精细的比例。

如何检测缩放级别现在已达到“天”并防止进一步放大?我想允许从年-> 日级别进行缩放,但没有超出此范围。

0 投票
1 回答
170 浏览

javascript - 无法放大 Chart.js

我用chart.js在MVC中创建了一些图表没有问题现在我想按照这个例子在折线图中实现放大

在我的布局页面中,我添加了:

我的 JS 函数是这样的:

我收到错误消息:

似乎是因为在生成图形后更新图形,但这是我需要的。

我该如何解决?

0 投票
2 回答
77 浏览

javascript - 缩放时未触发 onZoom

我使用 react-chartjs-2 和一个名为 chartjs-plugin-zoom 的插件制作了一个折线图。我想在缩放图表时在控制台中显示缩放级别。但是,缩放时似乎没有触发或调用 onZoom,因为我在控制台面板中看不到任何更新。想问一下我的 onZoom 语法是否错误,我该如何解决?

在线示例

https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js