Угловая диаграмма Highcharts не выводится из события renderer.button

На диаграмме есть 2 настраиваемые кнопки для обновления серии, чтобы перерисовать диаграмму (переключение представлений) по проценту (%) или по количеству. В функции обратного вызова renderer.button, когда я нажимаю кнопку подсчета, я обновляю данные серии, изменяя значение y в объекте данных и вызывая метод chart.update() с измененными данными серии.

const seriesData: any = this.data;
this.update(seriesData, true);
this.redraw();

Диаграмма не перерисовывается автоматически, она перерисовывается только при увеличении или уменьшении масштаба браузера или любых других действиях. Что здесь отсутствует?

введите описание изображения здесь

Stackblitz


javascript angular highcharts angular-highcharts
person pupil    schedule 06.04.2020    source источник
comment
Обратите внимание, что this.data в вашем обратном вызове undefined, и вы пытаетесь обновить график с его помощью, поэтому возникает ошибка и перерисовка не работает, см.: stackblitz.com/edit/angular-9nkrgd-dahide?file=src/app/   -  person Sebastian Wędzel    schedule 06.04.2020
comment
@ SebastianWędzel Мой плохой, обновил код. Я пробовал обновить серию [0] для тестирования. Выдает ошибку `` Превышен максимальный размер вызова ''   -  person pupil    schedule 06.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Проблема, которую вы пытаетесь решить, заключается в том, что вызов метода update в функции render создает бесконечный цикл.

Обновление вызовов рендеринга -> обновленная диаграмма перерисовок -> рендер снова вызывает рендеринг -> обновление вызовов рендеринга -> ...

Один из способов избежать этого - использовать некоторые логические 'флаги' для управления тем, что обновление будет вызываться один раз.

Простая демонстрация с console.log для тестирования потока: https://jsfiddle.net/BlackLabel/acoxmhdw/

let chartForUpdate = true;

Highcharts.chart('container', {

  chart: {
    events: {
      render() {
        let chart = this;
                console.log('test redraw call 1')
        if (chartForUpdate) {
          chartForUpdate = false;
          chart.series[0].update({
            data: [5, 10]
          })
          console.log('test condition IF call')
        }
        console.log('test redraw call 2')
                chartForUpdate = true
      }
    }
  },

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

РЕДАКТИРОВАТЬ

Я совершил ошибку, приношу свои извинения - максимальный стек вызовов возник не из-за бесконечного цикла из вызовов рендеринга, а из данных, которые вы пытались вставить.

Обновленные данные должны быть в формате, который требуется Highcharts - это объект конфигурации серии с данными в виде массива объектов, массива значений или массива массивов - документация: https://www.highcharts.com/docs/chart-concepts/series и https://api.highcharts.com/class-reference/Highcharts.Series#update

Между тем, в вашей демонстрации массив объектов данных передается функции обновления, которая создает ошибку.

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

https://stackblitz.com/edit/angular-9nkrgd-aykarp?file=src/app/app.component.ts.

person Sebastian Wędzel    schedule 06.04.2020
comment
Я добавил свойство chartForUpdate в диаграмму и указанное выше условие, но по-прежнему существует ошибка максимального размера вызова. Обновили тот же stackblitz - person pupil; 06.04.2020