Angular：使用导航器以编程方式将多个 y 轴添加到 highstock

Question

我有一个问题，但我可能只是做错了什么。我的要求是用户可以在运行时添加或删除自定义 y 轴的趋势。我们的项目使用 Angular 和官方的 highcharts-angular 包装器。

我一直在做的是构建轴配置对象并将它们推送到配置中的 yAxis 数组中。我还在添加每个对象之前设置了更新选项，并且对象本身被正确组装和添加。

问题是我添加的第一个轴显示为好像它适用于导航器而不是主图，并且任何后续轴都被忽略（尽管它们正确出现在配置对象中）。

yAxis appears in navigator

当我手动将相同的轴添加到初始配置对象时，它显示正确。但是，任何动态添加的从那时起都遵循相同的模式（添加的第一个显示在导航器中，其他的根本不显示）。

axis from config object appears normally

我做错了什么吗？我应该以某种方式获取图表对象并调用 addAxis 吗？似乎必须有更直接、更正确的 angular 方法来做到这一点。任何见解表示赞赏。

提前致谢！

Answer 1

不久前解决了这个问题；在这里回答以防其他人遇到类似问题。

我没有找到不包括使用图表对象的解决方案。该对象具有更新图表的所有相关方法并且它们有效。如果您需要一种（相对）优雅的方式在 angular 项目中获取此对象，请考虑在预定义的加载事件中这样做：

const component = this;
this.chartOptions = {
  chart: {
    events: {
      load: function() {
        component.chartObject = this; // expose chart object to component in order to  properly add and remove axes
      }
    }
  }
}

Angular：使用导航器以编程方式将多个 y 轴添加到 highstock

Angular: Programatically adding multiple y-axes to highstock with navigator

javascript

highstock

angular