Question

我有以下问题：

我想用Ajax Calls中的Points动态更新hightstock图表。例如，我使用setInterval（addPoints，3000）;我如何开发代码，highstock图表显示一个确定的时间，例如1分钟，图表开始从左侧绘制，没有这个＆＃34;时间弹出和挤压？对于一个testrun我试图预测零点，但间隔不修复。

var value1="valueNo1";
var value2="valueNo2";


var color1="green";
var color2="red";


$(function () {
$('#container').highcharts('StockChart',{
             chart: {
                 type: 'spline',
                 zoomtype: 'z'
            },

            title: {
                text: 'Live random data'
            },
            navigator: {
                top: 500
            },    
            legend: {
                enabled: true
            },    
            rangeSelector: {
            buttons: [{
                count: 30,
                type: 'second',
                text: '30s'
            }, {
                count: 1,
                type: 'minute',
                text: '1M'
            }, {  
                count: 2,
                type: 'minute',
                text: '2M'
            }, {                    
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 1
        },
            xAxis: {
                type: 'datetime'

            }
});
});
var chart = $('#container').highcharts();


var ct = (new Date()).getTime();

// addAxis

chart.addAxis({ labels: { format: '{value}' , style: {color: color1 } }, title: { text: value1 , style: {color: color1} } ,   lineColor: color1, lineWidth: 0, opposite:true } );

chart.addAxis({ labels: {  format: '{value}', style: {color: color2 } }, title: { text: value2 , style: {color: color2} } ,   lineColor: color2, lineWidth: 0 } );

// addSeries

chart.addSeries({ "name": "value1","data": [], yAxis: 2, marker: {enabled:true, radius: 5 }});



// addPoint
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time+64000, null], false);

addPoints = function(){
         var current_time = (new Date()).getTime();
         chart.series[0].addPoint([current_time, Math.random()*10], false);  
         chart.redraw();    
}

setInterval(addPoints,3000);

请参阅问题的jsFiddle演示：

http://jsfiddle.net/ehonk/FLzRH/1/

请帮忙

Answer 1

“弹出”是添加的数据以及将最后一个点连接到新点并且yAxis重新缩放的线。为了最大限度地减少这种情况，我将yAxis.max设置为可能的最大值。其次，我会看一下动画，看看当adds新点时你想要使用哪种动画。

要处理“sqeezing”，您可以设置“可查看”范围和添加点，以便在添加新点时，左侧的最后一个点落在可视区域之外。

Answer 2

您也可以拨打setExtremes来设置xAxis上的范围。

Highstock，动态添加点，开始时的定义时间跨度

2 个答案: