如何在Highchart上显示实时数据

时间:2019-03-15 15:09:11

标签: javascript highcharts

我正在尝试使用Highchart显示实时交易。一旦传递给它的URL更新,我就使用JavaScript的EventSource类来获取数据。我正在按照Highchart中的示例进行操作-https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/

我做了一些调整以反映我想要的内容,但是当我加载页面并且从URL发送数据时,我在控制台上收到此错误-

(index):1 GET http://myurl/analytics-api/v1.0/payments-stream net::ERR_ABORTED 504 (Gateway Time-out)
(index):1 Access to resource at 'http://myurl/analytics-api/v1.0/payments-stream' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我的代码:

Highcharts.chart('liveTrans', {
        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];
                    var es = new EventSource('http://myurl/analytics-api/v1.0/payments-stream')
                    es.onmessage = function(e) {
                        var obj = JSON.parse(e.data);
                        var amount = obj.amount;
                        var jDate = Date.parse(obj.timestamp)
                        series.addPoint([jDate, amount], true, true)
                        console.log('added')
                    };

                }
            }
        },

        time: {
            useUTC: false
        },

        title: {
            text: 'Live random data'
        },
        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: []
    });

0 个答案:

没有答案