误差类型:series.addpoint不是函数 - 角高ch

Question

我尝试添加点时会遇到此错误

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

Answer 1

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

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

演示：

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

HighCharts-angular

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