Highcharts - SVG против цифровых

Question

Я пытался сделать несколько необычных манипуляций с графиком нагрузки. Используя svg renderer, я создал групповые элементы с текстовыми элементами. Затем я вычислил высоту каждого из элементов группы (заголовки, кредиты), и теперь я пытаюсь обновить spacingTop / spacingBottom на основе этих вычислений (пожалуйста, не спрашивайте, почему я не использую собственные заголовки и кредиты старших графиков: )) Кроме того, мне нужно расширить каждую линию сетки оси Y, чтобы они начинались с нуля. Однако, когда я это делаю, я вижу, что моя диаграмма не расширяет эти линии сетки в браузере, а работает правильно в экспортированном SVG. Может кто-нибудь объяснить, почему это происходит и как я могу это сделать, а затем показать в браузере.

Заранее спасибо! PS Gridlines расширяются в цифровом формате, когда я не использую функцию chart.update.

Вот простая реализация: https://jsfiddle.net/sabira/x2uc6809/20/ Пожалуйста, скачайте png || svg, чтобы сравнить версию браузера и изображение.

chart: {
        events: {
        load: function(){
          const chart = this;
          const {yAxis} = chart;

          const [headingsHeight, creditsHeight] = [50, 60];

          chart.update({
            chart: {
              spacingTop: 10 + headingsHeight,
              spacingBottom: 11 + creditsHeight,
            },
          });

          const { gridGroup } = yAxis[0];

          const gridLines = findEls(gridGroup, 'path');

          [...gridLines].forEach(extendGridLine);

      }
      }
    },

Answer 1

Это вызвано обновлением анимации, которая делает ваш код асинхронным. Вы можете отключить его следующим образом:

    chart.update({
      chart: {
        spacingTop: 10 + headingsHeight,
        spacingBottom: 11 + creditsHeight,
      },
    }, true, false, false);

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/e3gamoju/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update