javascript - 解释为什么我需要在 Angular $timeout 中包装 highcharts jquery 事件以访问属性

Question

这个问题的目的

为了理解为什么我必须包装 highcharts load event使用 $timeout, before I can have full access to all the data the highcharts object 调用处理程序嵌入事件的目的是提供。如主题中所述，我正在使用 angularjs 和 highcharts-ng .

我发现加载事件在对象中应该存在的所有数据都存在之前就触发了，这真的很奇怪。特别是因为我没有使用 addSeries 用数据填充图表。我正在手动构建整个配置对象。这种方法也是 highcharts-ng 规定的。

我也很难接受我需要使用“$timeout”来处理似乎是竞争条件的情况。这是因为我来自 C++ 背景，它可能不是竞争条件，而只是现代 Web 开发、javascript 和 Jquery 的自然怪癖之一。我对此知之甚少。

如果我能理解发生了什么，我就可以自信地继续前进。如果这个问题与我们使用 highcharts-ng 有关，我可以放弃它并自己包装 highcharts。如果有更好的方法来解决我的用例(见下文)，那也可以。

我看到的行为

我开始通过将 highcharts 对象打印到控制台来解决我的问题，当我展开它时它会显示所有字段。但是，当我尝试着手解决我的问题时，我开始发现当我尝试访问某些字段时，它们实际上是未定义的。

Ok so I discovered这是因为当我在控制台中单击展开时，所有值都已填充。但是当我尝试在我的负载处理程序中访问它们时，它们是未定义的。

当我将我的回调包装在 Angular 的 $timeout 中时，问题就消失了。但为什么 ？ highcharts 在完成所有计算之前不应该触发加载回调，事实上，如果不计算一些未定义的字段，它就无法呈现图表。那么是什么给了？一些 html5 网络 worker 多线程正在进行吗？ :D

Highcharts 动画...动画是否导致类似比赛的行为？

我找到了一些关于这个问题的引用资料，其中规定的解决方案是挂接到动画完成方法。 图表已禁用动画。但我想 highcharts 仍然可以使用一些 jquery 动画？如果它能解决我的问题并且意味着我不必使用 $timeout，我可以尝试连接到这个处理程序。

我正在尝试解决的问题。

我正在开发一个复杂的可视化应用程序，我需要动态重新缩放 Y 轴，以便 Y 轴上的 2 条关键绘图线始终存在。硬编码极端值不是一种选择，因为它会阻止图表根据数据范围进行扩展。

Highcharts 计算各种最大值和最小值，我想检查这些值，如果我的绘图线不在这些最大值和最小值范围内，我想设置新的极值并重新绘制图形。

This question对问题有一些潜在的解决方案。可悲的是，hacky answer似乎是最强大和最简单的——即在绘图线上添加一个点并将其隐藏。我可能会走这条路以节省时间。虽然我不想。

Answer 1

我是 highcharts-ng 的作者。

我认为问题是在 highcharts-ng 中，它初始化图表然后添加系列。

这可以很容易地解决。它需要更改 getMergedOptions: https://github.com/pablojim/highcharts-ng/blob/master/src/highcharts-ng.js#L245

目前 getMergedOptions 不包括系列对象，因此当图表初始化时它没有系列。这种行为是可以改变的。有一些复杂的问题，比如确保系列有 ID。但这是完全可行的。我会在某个时候开始做这件事，但同时很乐意接受拉取请求。

另一种方法是根据您的数据在 highcharts-ng 配置对象上动态设置 x 和 y 轴值。