问题标签 [chartjs-plugin-zoom]

我正在尝试将chart.js 缩放插件与我的 Qlik Sense 扩展一起使用。我猜 Qlik 在这里并不重要，但无论如何我都会提到它。

所以这是我尝试通过 require.js 加载插件的方法：

我在使用 datalabels 插件时遇到了类似的问题，但是通过上面代码片段中的映射解决了这个问题。

我总是遇到的错误是

未捕获的类型错误：无法读取未定义的属性“助手”

这是来自这里的第 11 行。

关于我应该如何要求这个插件来克服这个错误的任何帮助？到目前为止，我一直试图寻找一个没有运气的解决方案。提前致谢。

我在离线环境中工作，并且正在使用从 yarn-mirror 导入的 chartjs：Chart.js 2.7.2 chartjs-plugin-zoom 0.6.6hammerjs 2.0.8 moment 2.23.0

我确实将它们作为 import 'chartjs-plugin-zoom'、import 'hammerjs'、import 'moment'、import {Chart} from 'chart.js' 导入到我的 .js 文件中。

我还捆绑了所有文件，并且可以看到捆绑包中的依赖项。

在我的项目的节点模块中，缩放样本正在工作，resetZoom();但是当我在我的项目中运行它们时，我得到了错误：

我无法用鼠标滚动放大我的图表。

我有一个菜单选项设置：

我可以看到这个工作，所以理论上它应该工作正常？怎么了？？

我也尝试手动添加：

当我添加图表但仍然没有...

我正在尝试在本地测试 chart.js 缩放插件示例（来自官方示例文件夹）。示例文件名为 zoom.html 我在示例代码中将脚本路径更改为本地路径：

所有脚本都是最新版本：

Chart.js：2.7.3

Hammer.js：2.0.8

chartjs-plugin-zoom：没有版本号，最新从github下载

缩放不起作用，我在控制台中看到错误：

在 chartjs-plugin-zoom.js 的第 3 行

所以看起来

插件代码中的行工作错误。或者也许我做错了什么。

当我尝试图书馆的其他位置时发生了同样的错误。

我有一个使用 ChartJS 和插件“chart-plugin-zoom”进行缩放的图表。我需要在缩放 x 轴时将 y 轴自动缩放到可见图形段上显示的数据点。我该怎么做？

在此处输入图像描述

是否有任何属性或任何方法可以在 chartjs 上获得这种效果

首先，我在 Angular 7 中工作，我得到了以下“应用程序”：

顶部栏是日期过滤器，可以选择日期“From”（葡萄牙语中的 De）和日期“To”（葡萄牙语中的 Até）。假设通过选择这些日期，图形仅显示相应的时间间隔，例如：2019/01/01 到 2019/02/02 天。就那么简单。所以现在我将展示我用来将数据从条形组件 ( filtro-data.component) 传递到父组件 ( charts-report.component)，然后从父组件传递到许多图形的逻辑，但现在我们只使用 ( dimensao-component)。我只使用 de From 输入将其提供给缩放：分钟。

所以在这里我准备了来自输入的数据以将它们发送给父级。这是父母：

有了所有这些，我会将信息发送到我的组件 dimensao...

我做了一些“测试”，dimensao 组件收到了我在 filter-date.component 中选择的日期，所以一切都很好......但是当我点击按钮“Aplicar”时，图形不会更新，即使使用执行此操作的功能（请参阅charts-report.component 中的receiveMessage）...我尝试了很多事情，但没有任何解决办法。你知道我能做什么吗？我只想用“min”中的新数据更新图形。谢谢你。

我最近更新到 Angular 8 并更新了我的图表相关包。我不得不将我的代码更新为 ng2-charts 的新数据格式。我在我的项目中使用 chartjs-plugin-zoom。

我的问题是：单击我的图表会发生非常高的缩放，单击图例也会发生这种情况。再次单击会缩小。

我已经在这个 stackblitz 中重现了这个问题： https ://stackblitz.com/edit/ng2-charts-line-template-czofzn

有什么我做的不对吗？或者我不应该使用坐标格式的时间数据？

我正在尝试在Zoom/onPan 上获取更多数据到我的chartjs 折线图（或使用缓存的一些备份数据），但是这样做有很多问题。

我的初始代码库非常复杂，我无法在这里完全复制，但我会分享我已经尝试过的内容。

第一种解决方案： 此处提到的Chartjs-plugin-zoom共享onZoom和回调， 但这些回调不提供任何上下文（图表、x、y），并且在平移/缩放时调用，甚至不正确。onPan

此 PR 解决了一些问题，但尚未合并：链接

第二种解决方案：我试图在beforeUpdate回调中获取图表 js 中的更改数据，但这也给我带来了很多问题。默认情况下，我在图表中显示大约 1000 个数据点，并且由于我的图表每秒更新一次，所以我要做的是备份数据，其中包含 1000 个数据点之外的传递数据点，所以当有人 zoomOut 我正在检查左右的坐标，如果这些改变（增加）我想在beforeUpdate回调中增加数据集中的数据。

在第二种方法中，我收到更多错误，例如：

TypeError：无法读取未定义的属性“隐藏”

你有第三种解决方案吗？请把它扔到下面。

编辑：我尝试过不同的版本

似乎第一个解决方案现在正在工作，但还有另一个问题：

• onZoom缩放时被调用，而不是

  Function called once zooming is completed

  如自述文件中所述，因此这不会真正有助于从 API 获取数据。

我正在尝试设置缩放的开始日期和结束日期，而不是图表的开始最小值和最大值。我没有发现问题。有人可以帮忙吗？它在 VueJS 中

例如，我的图表从 12:00 开始，到 16:00 结束。我在 14:00 到 15:00 之间单击，我想获取这些值并将其提供给我的父母。

我正在使用 ng2-charts 绘制折线ChartsModule图数据。我还添加了一个插件来启用缩放和平移。

问题是我有很多数据要显示和绘制，但是在页面加载时，我只加载最后 1 天的数据，并希望让用户可以选择通过向左平移来查看历史数据。

我收到onPanComplete有关图表平移的事件并能够更新数据集，但不确定我如何知道用户已到达图表的左端，以便我将加载更多数据并更新数据集。

下面是我的图表组件：

另外，我想知道是否有更好的方法来实现平移事件的历史数据加载