javascript - 使用 float 新添加的数据点的平滑动画

Question

我需要使用 flot 制作实时图表的动画，以便每个新数据点都能平滑地过渡到数据集等。

我用基本流程制作了一个plunker: 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 .