Angular: постепенное добавление нескольких осей Y в верхнюю точку с помощью навигатора

Question

У меня есть проблема, но я могу просто сделать что-то не так. Мое требование - тренд, когда пользователь может добавлять или удалять пользовательские оси Y во время выполнения. В нашем проекте используется Angular и официальная оболочка highcharts-angular.

То, что я делал, - это создание объектов конфигурации осей и помещение их в массив yAxis в конфигурации. Я также установил параметр обновления перед добавлением каждого объекта, и сами объекты собраны и добавлены правильно.

Проблема в том, что первая добавленная мной ось отображается так, как будто она применяется к навигатору вместо основного графика, а любые последующие оси игнорируются (хотя они правильно отображаются в объекте конфигурации).

yAxis появляется в навигаторе

Когда я вручную добавляю ту же ось в объект начальной конфигурации, она отображается правильно. Однако любые динамически добавленные следуют той же схеме начиная с этой точки (первая добавленная отображается в навигаторе, а остальные вообще не отображаются).

ось от объекта конфигурации отображается нормально

Я что-то не так делаю? Должен ли я каким-то образом получить объект диаграммы и вызвать addAxis? Похоже, должен быть более прямой, правильный угловой способ сделать это. Любое понимание приветствуется.

Заранее спасибо!

Answer 1

Решил это некоторое время назад; здесь ответ на случай, если кто-то столкнется с подобной проблемой.

Я не нашел решения, которое не включает использование объекта диаграммы. У этого объекта есть все соответствующие методы для обновления диаграммы, и они работают. Если вам нужен (относительно) элегантный способ получить этот объект в угловом проекте, подумайте о том, чтобы сделать это в предопределенном событии загрузки, например:

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
      }
    }
  }
}