Highcharts在服务器上滞后,在localhost上运行良好

时间:2013-11-29 16:31:03

标签: javascript ajax highcharts

我有一个很奇怪的问题。我在我的网站上添加了动态更新的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/

0 个答案:

没有答案