流暢的動畫與海軍報

Question

新添加的數據點我需要動畫與海軍報實時圖形，使每個新的數據點將會平滑過渡到數據集等

我做了一個plunker的基本流量： http://plnkr.co/edit/oPahmS?p=preview

但我想使它更像highcharts

http://www.highcharts.com/demo/dynamic-update

有誰知道一個插件或方式與海軍報做到這一點？

Answer 1

我不相信flot動畫插件提供這種能力。相反，它可以用一點點jquery animate魔法來完成。

addPointAnimate = function(){ 
    var series = somePlot.getData()[0]; // first series 
    var lastX = series.data[series.data.length-1][0]; // last x value 
    var opts = somePlot.getOptions(); 
    opts.xaxes[0].max += 1; // adjust xaxis to make room for new point 
    somePlot.setupGrid(); 
    $('#placeholder').animate({ 1:1 }, { 
     duration: 1000, 
     step: function (now, fx) { 
      series.data.push([lastX+fx.pos, Math.sin(lastX+fx.pos)]); // for each step of animation, push on an intermediate value 
      somePlot.setData([series]); 
      somePlot.draw(); // redraw with intermediate value 
     } 
    }); 
    return true; 
} 

這裏是一個工作fiddle。