我有一个很奇怪的问题。我在我的网站上添加了动态更新的Highcharts for Bitcoin交易。它在localhost上完美运行,但在服务器上,相同的代码会导致奇怪的延迟 - 浏览器在更新时会挂起几秒钟。点弹出窗口被冻结,滚动被锁定。这在Chrome中非常值得注意。 Safari的受影响似乎有点小。
本地主机和服务器(alexatnet.com/projects/btce-realtime-charts)上的代码相同:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
function buildUpdatedChart(data, init, updater, interval) {
var chart;
Highcharts.setOptions({ global : { useUTC : false } });
$('#container').highcharts({
plotOptions : {
line : { animation : false },
series : { animation : false }
},
chart : {
animation : Highcharts.svg, // don't animate in old IE
marginRight : 10,
events : {
load : function() {
init(this);
setInterval(function() {
updater(this);
}.bind(this), interval);
}
}
},
title : { text : 'BTC-e BTC/USD Transactions' },
xAxis: {
type : 'datetime',
tickPixelInterval : 150
},
yAxis: {
title : { text : 'BTC/USD' },
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip: {
formatter : function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2) + ' - ' +
Highcharts.numberFormat(this.point.amount, 4);
}
},
legend : { enabled: false },
exporting : { enabled: false },
series : [ {
name : 'BTC/USD',
step : true,
data : data
} ]
});
}
function getTransactions(tid, callback) {
$.get('/projects/btce-realtime-charts/trades?tid=' + tid, function (data) {
callback(data.sort(function (a, b) { return a.date - b.date; }));
});
}
function itemToPointConverter(item) {
return { x : item.date * 1000, y : item.price, amount : item.amount };
}
function updateTimeWindow(chart) {
var dt = new Date().getTime();
chart.xAxis[0].update({
min : dt - 3 * 60 * 1000,
max : dt
}, false);
}
getTransactions('', function (items) {
var tid = items.slice(-1)[0].tid;
buildUpdatedChart(items.map(itemToPointConverter),
function (chart) {
updateTimeWindow(chart);
chart.redraw();
},
function (chart) {
getTransactions(tid, function (items) {
updateTimeWindow(chart);
if (0 === items.length) {
return;
}
tid = items.slice(-1)[0].tid;
items.map(itemToPointConverter).forEach(function (point) {
chart.series[0].addPoint(point, false);
});
chart.redraw();
});
}, 5000);
});
});
</script>
这是一个可以玩的jsfiddle:http://jsfiddle.net/dA6Ec/