ОШИБКА TypeError: series.addPoint не является функцией - Angular highcharts

Я получаю эту ошибку, когда пытаюсь добавить точки

ОШИБКА TypeError: series.addPoint не является функцией

import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
import {LiveTrade} from "./models/models";
import {TickerService} from './services/ticker.service';



@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    Highcharts = Highcharts; // required
    title = 'arbitrage-chart';
    chartOptions: Highcharts.Options = {
        chart: {
            type: 'spline',
            // animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {

                    // // set up the updating of the chart each second
                    // var series = this.series[0];
                    // setInterval(function () {
                    //     var x = (new Date()).getTime(), // current time
                    //         y = Math.random();
                    //     series.addPoint([x, y], true, true);
                    // }, 1000);
                }
            }
        },

        time: {
            useUTC: false
        },

        title: {
            text: 'Bitstamp BTC/USD'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            type:'spline',
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    }


    constructor(private chatService:TickerService){
        const series = this.chartOptions.series[0];
        // console.log(this.chartOptions)


        // chatService.tickeStreamObservableSubject.subscribe((msg:LiveTrade) => {
        //     const series = this.chartOptions.series[0];
        //     console.log("Response from websocket: " + msg);
        //     const x = msg.timestamp, // current time
        //         y = Math.random();
        //     series.addPoint([x, y], true, true);
        // });
        setInterval(()=>{
            const series = this.chartOptions.series[0];
            console.log(this.chartOptions)
            const x = new Date().getTime(), // current time
                y = Math.random();
            series.addPoint([x, y], true, true);
        }, 1000)
    }
}

person TSR    schedule 05.05.2019    source источник


Ответы (1)


Эта ошибка возникает из-за того, что вы не создали ссылку на диаграмму, а только параметры диаграммы. Узнайте, как добавлять баллы с помощью этого метода: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-addpoint-append/

Кроме того, рассматривали ли вы возможность использования highcharts-angular официальной оболочки Highcharts для Angular? Затем вместо использования таких методов, как addPoint() или addSeries(), вы можете просто обновить объект chartOptions и установить updateFlag = true, и весь компонент диаграммы будет обновлен. Проверьте пример, размещенный ниже.

Демонстрация:

highcharts-angular

person Wojciech Chmiel    schedule 06.05.2019