我正在尝试使用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: []
});