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/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-addpoint-append/

此外，您是否考虑过将highcharts-angular的Highcharts官方包装用于Angular？然后，无需使用addPoint()或addSeries()之类的方法，只需更新chartOptions对象并设置updateFlag = true，整个图表组件就会被更新。检查示例如下。

演示：

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

highcharts-angle

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

错误TypeError：series.addPoint不是函数-角高图表

1 个答案: