highcharts-angular динамически обновляется из БД

Question

Я использую highcharts-angular в приложении Angular 6.Когда я устанавливаю данные, хардкорные, в ngOnInit диаграмма отображается и работает правильно.

Но я хочу динамически обновлять серию диаграмм, то есть добавлять точки к серии, добавлять новые серии ... Это будет сделанопосле вызова веб-API и получения новых данных вызовите loadBidChartData ().

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

Вот небольшой пример кода в HTML выглядит так:

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [update]="true" ></highcharts-chart> 

в угловых:

 import * as Highcharts from 'highcharts';
 export class ExampleComponent implements OnInit {
  Highcharts = Highcharts; // required    
  chartOptions = {
    chart: {
        type: "scatter",
        width: 900           
        },
    },
    tooltip: {
        valueDecimals: 0,
        formatter: function () {
            return this.y + ' €';
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',            
    },
    yAxis: {
        type: 'number',            
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        floating: false,
        borderWidth: 1
    },
    series: []      
};

ngOnInit(): void {
    this.chartOptions.series= [{
            name: 'first last',
            data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
        }];
}

loadBidChartData(bidApiModel: BidItem[]): void {
    this.chartOptions.series= [{
        name: 'first last',
        data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
    },
    {
        name: 'second last',
        data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
    }];
 }
}  

Решение : Рабочая демонстрация с обновлением в фоновом режиме и добавлением и удалением точек на старших графиках: https://stackblitz.com/edit/angular-bv26xzСпасибо User3250 и Wojciech Chmiel за помощь.

Answer 1

Вам необходимо использовать флаг [(update)] для обновления серии, как показано ниже:

loadBidChartData(bidApiModel: BidItem[]): void {
    this.chartOptions.series= [{
        name: 'first last',
        data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
    },
    {
        name: 'second last',
        data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
    }];
   this.updateFlag = true;
}

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [(update)]="updateFlag" ></highcharts-chart>

Рабочая демонстрация здесь: https://stackblitz.com/edit/angular-d5spve