1

我正在尝试制作一个可以长期运行的比特币实时图表，使用 HighStocks 买卖两个数据集，问题是数据都是实时的，因此图表从没有数据开始，并且在这些条件下每 30 秒更新一次HighStocks 似乎并不总是很好玩

我创建了一个非常接近最终代码http://jsfiddle.net/v3z6T/2/的演示！增量设置为 1 秒以加快演示速度，此外，如果您将 adaptToUpdatedData 更改为 true，则在超过最低导航器间隔（30 秒）之前，这会产生显着的滞后效应，所以要小心

我希望导航器区域能够正常工作，但是如果我使用 adaptToUpdatedData 对其进行更新：true 图表在短时间内非常滞后，如果整个浏览器开始无响应并出现脚本延迟错误，我无法让它运行数小时

这对我来说很奇怪，例如以 30 秒的增量运行 8 小时只有 960 个数据点，不足以使用看起来的处理和内存

如果 adaptToUpdatedData 为 false，则图形会快得多，并且更新流正常，直到使用导航按钮之一，则图形不再“实时”，因为新更新超出范围，导航器也从 1970 年开始，而不是系列数据的开始

有谁知道触发导航器刷新的方法，或者当我添加一个新数据点时我可以调用的东西，这将保持导航器区域更新并将图表保持在最新的数据入口点，并且不会阻止页面及时呈现? 或使用 api 或数据的更好方法

希望这是有道理的这个图的整个想法是保持运行几天可能几周，以便随着数据的进展实时查看数据，我不能使用来自 HighStocks 的处理大型数据集示例代码，因为数据都是实时的，而不是提到我并没有真正使用大型数据集，只是不断缓慢的更新

$(function() 
{
    var curTime = $.now();
    var chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'chartContainer',
        zoomType: 'x',
        turboThreshold:100,
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: true,
                    radius: 5
                }
            }
        },
        shadow: false
    },
    rangeSelector: {
            buttons: [{
                count: 30,
                type: 'second',
                text: '30S'
            },{
                count: 5,
                type: 'minute',
                text: '5M'
            },{
                count: 30,
                type: 'minute',
                text: '30M'
            },{
                count: 60,
                type: 'minute',
                text: '1H'
            },{
                count: 360,
                type: 'minute',
                text: '6H'
            },{
                count: 720,
                type: 'minute',
                text: '12H'
            },{
                count: 1,
                type: 'day',
                text: '1D'
            },{
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false
        },
        scrollbar: {
            liveRedraw: false
        },          
        title : {
            text : 'Live Bitcoin Data'
        },          
        exporting: {
            enabled: true
        },  
        navigation: {
            buttonOptions: {
                theme: {
                    'stroke-width': 1,
                    stroke: 'silver',
                    r: 0,
                    states: {
                        hover: {
                            fill: '#bada55'
                        },
                        select: {
                            stroke: '#039',
                            fill: '#bada55'
                        }
                    }
                }
            }
        },
        navigator : {
            adaptToUpdatedData: false
        },          
        yAxis: {
            title: {
                text: 'Price'
            }
        },
        xAxis: {
            type: 'datetime'
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Sell',
                color: '#00FF00',
                pointStart: $.now(), 
                data : [],
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 3,
                    valuePrefix:"$"
                }
            },{
                name: 'Buy',
                color: '#FF00FF',
                pointStart: $.now(), 
                data : [],
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 3,
                    valuePrefix:"$"
                }
        }]
    });

    setInterval(function() {
        var chart = $('#chartContainer').highcharts();
        var exchangeSellRate = Math.floor(Math.random()*30)+40;
        var exchangeBuyRate = Math.floor(Math.random()*30)+40;
        var x = $.now(); 
        chart.series[0].addPoint([x,exchangeSellRate],false,false);
        chart.series[1].addPoint([x,exchangeBuyRate],true,false);       
    }, 1000);
});
4

0 回答 0