错误类型错误：series.addPoint 不是函数 - Angular highcharts答案

【问题标题】：ERROR TypeError: series.addPoint is not a function - Angular highcharts错误类型错误：series.addPoint 不是函数 - Angular highcharts
【发布时间】：2019-05-05 17:56:33
【问题描述】：

我在尝试添加积分时收到此错误

ERROR TypeError: series.addPoint is not a function

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)
    }
}

【问题讨论】：

标签： angular highcharts highcharts-ng

【解决方案1】：

出现此错误是因为您还没有创建图表参考只是图表选项。检查如何使用此方法添加点：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-addpoint-append/

另外，您是否考虑过为 Angular 使用 highcharts-angular 官方 Highcharts 包装器？然后，您可以更新chartOptions 对象并设置updateFlag = true，而不是使用addPoint() 或addSeries() 之类的方法，整个图表组件将被更新。检查下面发布的示例。

演示：

https://codesandbox.io/s/543l0p0qq4

highcharts-angular

https://github.com/highcharts/highcharts-angular

【讨论】：