使用flot為新添加的數據點平滑動畫

Question

我需要使用flot為實時圖形設置動畫，以便每個新數據點都可以平滑過渡到數據集等。

我已經用基本流程制作了一個關於這個問題的人： http ://plnkr.co/edit/oPahmS?p=preview

但我想讓它更像高級圖表

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

有沒有人知道插件或用flot做這個的方法？

Answer 1

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

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;
}

這是一個工作小提琴 。