Highcharts Angular Chart not redrwan от события renderer.button - PullRequest
0 голосов
/ 06 апреля 2020

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

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

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

enter image description here

Stackblitz

1 Ответ

1 голос
/ 06 апреля 2020

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

Render вызывает update - > обновление redr aws chart -> рендеринг вызывает снова -> рендеринг вызывает обновление -> ...

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

Простая демонстрация с 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]
  }]
});

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

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

Обновленные данные должны быть в формате, который требуется 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

...