使用flot为新添加的数据点平滑动画

Question

我需要使用flot为实时图形设置动画，以便每个新数据点都能平滑过渡到数据集等。

我已经用基本流量制作了一个龙头： http://plnkr.co/edit/oPahmS?p=preview

但我想让它更像highcharts

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

是否有人知道插件或使用flot执行此操作的方法？

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。