Question

我正在尝试使用HighStocks购买和销售两个数据集的长期运行比特币的实时图表，问题是数据全部存在，因此图表从没有数据开始，每30秒获得一次更新，在那些条件下，HighStocks似乎并不总是很好看

我创建了一个非常接近最终代码http://jsfiddle.net/v3z6T/2/的演示版！将增量设置为1秒以加速演示，如果将adaptToUpdatedData更改为true，则会产生明显的滞后效应，直到超出最低导航间隔（30s）为止，请小心

我希望导航器区域能够工作，但是如果我使用adaptToUpdatedData更新它：true 该图表在很短的时间后非常滞后，我不能让它运行几个小时没有整个浏览器开始没有响应并导致脚本延迟错误

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

如果adaptToUpdatedData为false，则图形更快，并且更新流在ok中直到使用其中一个导航按钮，然后图形不再“活动”，因为新更新超出范围，导航器也从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);
});

HighChart让导航器使用动态数据

0 个答案: