动画后的 flot 线变化

flot line changes after animation

我在线时间图上有浮动动画。动画结束后,线条略有变化。我怎样才能防止这种情况发生?

https://jsfiddle.net/shorif2000/cq6chwu8/

var options = {
  "xaxis": {
    "mode": "time",
    "timeformat": "%d/%m"
  },
  "yaxes": [{
    "position": "left",
    "min": 98,
    "max": 100,
    "tickSize": 1
  }, {
    "position": "right",
    "min": 0,
    "max": 2
  }],
  "series": {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "curvedLines": {
      "apply": true
    }
  },
  "colors": ["#008C00"],
  "legend": {
    "show": false
  },
  "grid": {
    "hoverable": true,
    "clickable": true
  }
};

var data_ajax = [{"lines":{"show":true,"lineWidth":3},"points":{"show":false},"threshold":{"below":99.53,"color":"#CC0000"},"data":[{"0":1451433600000,"1":99.5},{"0":1451437200000,"1":99.51},{"0":1451440800000,"1":99.48},{"0":1451444400000,"1":99.46},{"0":1451448000000,"1":99.46},{"0":1451451600000,"1":99.46},{"0":1451455200000,"1":99.48},{"0":1451458800000,"1":99.46},{"0":1451462400000,"1":99.43},{"0":1451466000000,"1":99.42},{"0":1451469600000,"1":99.37},{"0":1451473200000,"1":99.35},{"0":1451476800000,"1":99.4},{"0":1451480400000,"1":99.38},{"0":1451484000000,"1":99.41},{"0":1451487600000,"1":99.41},{"0":1451491200000,"1":99.42},{"0":1451494800000,"1":99.43},{"0":1451498400000,"1":99.43},{"0":1451502000000,"1":99.41},{"0":1451505600000,"1":99.4},{"0":1451509200000,"1":99.41},{"0":1451512800000,"1":99.41},{"0":1451516400000,"1":99.44},{"0":1451520000000,"1":99.44},{"0":1451523600000,"1":99.44},{"0":1451527200000,"1":99.44},{"0":1451530800000,"1":99.43},{"0":1451534400000,"1":99.43},{"0":1451538000000,"1":99.53},{"0":1451541600000,"1":99.43},{"0":1451545200000,"1":99.43},{"0":1451548800000,"1":99.43},{"0":1451552400000,"1":99.43},{"0":1451556000000,"1":99.44},{"0":1451559600000,"1":99.46},{"0":1451563200000,"1":99.47},{"0":1451566800000,"1":99.47},{"0":1451570400000,"1":99.47},{"0":1451574000000,"1":99.47},{"0":1451577600000,"1":99.44},{"0":1451581200000,"1":99.44},{"0":1451584800000,"1":99.47},{"0":1451588400000,"1":99.49},{"0":1451592000000,"1":99.51},{"0":1451595600000,"1":99.49},{"0":1451599200000,"1":99.49},{"0":1451602800000,"1":99.49},{"0":1451606400000,"1":99.5},{"0":1451610000000,"1":99.51},{"0":1451613600000,"1":99.5},{"0":1451617200000,"1":99.49},{"0":1451620800000,"1":99.6},{"0":1451624400000,"1":99.49},{"0":1451628000000,"1":99.5},{"0":1451631600000,"1":99.48},{"0":1451635200000,"1":99.48},{"0":1451638800000,"1":99.47},{"0":1451642400000,"1":99.48},{"0":1451646000000,"1":99.48},{"0":1451649600000,"1":99.47},{"0":1451653200000,"1":99.47},{"0":1451656800000,"1":99.46},{"0":1451660400000,"1":99.46},{"0":1451664000000,"1":99.47},{"0":1451667600000,"1":99.46},{"0":1451671200000,"1":99.46},{"0":1451674800000,"1":99.47},{"0":1451678400000,"1":99.7},{"0":1451682000000,"1":99.48},{"0":1451685600000,"1":99.66},{"0":1451689200000,"1":99.69},{"0":1451692800000,"1":99.69},{"0":1451696400000,"1":99.7},{"0":1451700000000,"1":99.7},{"0":1451703600000,"1":99.7},{"0":1451707200000,"1":99.69},{"0":1451710800000,"1":99.69},{"0":1451714400000,"1":99.69},{"0":1451718000000,"1":99.69},{"0":1451721600000,"1":99.46},{"0":1451725200000,"1":99.46},{"0":1451728800000,"1":99.45},{"0":1451732400000,"1":99.45},{"0":1451736000000,"1":99.45},{"0":1451739600000,"1":99.43},{"0":1451743200000,"1":99.44},{"0":1451746800000,"1":99.44},{"0":1451750400000,"1":99.44},{"0":1451754000000,"1":99.43},{"0":1451757600000,"1":99.44},{"0":1451761200000,"1":99.64},{"0":1451764800000,"1":99.61},{"0":1451768400000,"1":99.62},{"0":1451772000000,"1":99.41},{"0":1451775600000,"1":99.42},{"0":1451779200000,"1":99.41},{"0":1451782800000,"1":99.39},{"0":1451786400000,"1":99.41},{"0":1451790000000,"1":99.4},{"0":1451793600000,"1":99.4},{"0":1451797200000,"1":99.4},{"0":1451800800000,"1":99.41},{"0":1451804400000,"1":99.41},{"0":1451808000000,"1":99.38},{"0":1451811600000,"1":99.37},{"0":1451815200000,"1":99.33},{"0":1451818800000,"1":99.36},{"0":1451822400000,"1":99.36},{"0":1451826000000,"1":99.35},{"0":1451829600000,"1":99.35},{"0":1451833200000,"1":99.37},{"0":1451836800000,"1":99.28},{"0":1451840400000,"1":99.24},{"0":1451844000000,"1":99.26},{"0":1451847600000,"1":99.25},{"0":1451851200000,"1":99.57},{"0":1451854800000,"1":99.39},{"0":1451858400000,"1":99.43},{"0":1451862000000,"1":99.43},{"0":1451865600000,"1":99.43},{"0":1451869200000,"1":99.42},{"0":1451872800000,"1":99.42},{"0":1451876400000,"1":99.41},{"0":1451880000000,"1":99.41},{"0":1451883600000,"1":99.41},{"0":1451887200000,"1":99.41},{"0":1451890800000,"1":99.38},{"0":1451894400000,"1":99.37},{"0":1451898000000,"1":99.31},{"0":1451901600000,"1":99.22},{"0":1451905200000,"1":99.2},{"0":1451908800000,"1":99.22},{"0":1451912400000,"1":99.23},{"0":1451916000000,"1":99.25},{"0":1451919600000,"1":99.3},{"0":1451923200000,"1":99.37},{"0":1451926800000,"1":99.42},{"0":1451930400000,"1":99.42},{"0":1451934000000,"1":99.4},{"0":1451937600000,"1":99.4},{"0":1451941200000,"1":99.4},{"0":1451944800000,"1":99.4},{"0":1451948400000,"1":99.4},{"0":1451952000000,"1":99.37}],"animator":{"start":0,"steps":135,"duration":3000,"direction":"right"}}]

$.plotAnimator($('#chart1'), data_ajax, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="chart1" style="width: 540px; height: 250px;">

您的动画有 135 个步骤,但您的数据有更多的数据点。这导致动画中的插值,在图表中局部极值 ("spikes") 的位置最明显。

增加步数可以解决这个问题,最佳值是数据点数减一(已更新fiddle):

"animator": {
    "start": 0,
    "steps": 145 - 1,
    "duration": 3000,
    "direction": "right"
}

var options = {
  "xaxis": {
    "mode": "time",
    "timeformat": "%d/%m"
  },
  "yaxes": [{
    "position": "left",
    "min": 98,
    "max": 100,
    "tickSize": 1
  }, {
    "position": "right",
    "min": 0,
    "max": 2
  }],
  "series": {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "curvedLines": {
      "apply": true
    }
  },
  "colors": ["#008C00"],
  "legend": {
    "show": false
  },
  "grid": {
    "hoverable": true,
    "clickable": true
  }
};

var data_ajax = [{"lines":{"show":true,"lineWidth":3},"points":{"show":false},"threshold":{"below":99.53,"color":"#CC0000"},"data":[{"0":1451433600000,"1":99.5},{"0":1451437200000,"1":99.51},{"0":1451440800000,"1":99.48},{"0":1451444400000,"1":99.46},{"0":1451448000000,"1":99.46},{"0":1451451600000,"1":99.46},{"0":1451455200000,"1":99.48},{"0":1451458800000,"1":99.46},{"0":1451462400000,"1":99.43},{"0":1451466000000,"1":99.42},{"0":1451469600000,"1":99.37},{"0":1451473200000,"1":99.35},{"0":1451476800000,"1":99.4},{"0":1451480400000,"1":99.38},{"0":1451484000000,"1":99.41},{"0":1451487600000,"1":99.41},{"0":1451491200000,"1":99.42},{"0":1451494800000,"1":99.43},{"0":1451498400000,"1":99.43},{"0":1451502000000,"1":99.41},{"0":1451505600000,"1":99.4},{"0":1451509200000,"1":99.41},{"0":1451512800000,"1":99.41},{"0":1451516400000,"1":99.44},{"0":1451520000000,"1":99.44},{"0":1451523600000,"1":99.44},{"0":1451527200000,"1":99.44},{"0":1451530800000,"1":99.43},{"0":1451534400000,"1":99.43},{"0":1451538000000,"1":99.53},{"0":1451541600000,"1":99.43},{"0":1451545200000,"1":99.43},{"0":1451548800000,"1":99.43},{"0":1451552400000,"1":99.43},{"0":1451556000000,"1":99.44},{"0":1451559600000,"1":99.46},{"0":1451563200000,"1":99.47},{"0":1451566800000,"1":99.47},{"0":1451570400000,"1":99.47},{"0":1451574000000,"1":99.47},{"0":1451577600000,"1":99.44},{"0":1451581200000,"1":99.44},{"0":1451584800000,"1":99.47},{"0":1451588400000,"1":99.49},{"0":1451592000000,"1":99.51},{"0":1451595600000,"1":99.49},{"0":1451599200000,"1":99.49},{"0":1451602800000,"1":99.49},{"0":1451606400000,"1":99.5},{"0":1451610000000,"1":99.51},{"0":1451613600000,"1":99.5},{"0":1451617200000,"1":99.49},{"0":1451620800000,"1":99.6},{"0":1451624400000,"1":99.49},{"0":1451628000000,"1":99.5},{"0":1451631600000,"1":99.48},{"0":1451635200000,"1":99.48},{"0":1451638800000,"1":99.47},{"0":1451642400000,"1":99.48},{"0":1451646000000,"1":99.48},{"0":1451649600000,"1":99.47},{"0":1451653200000,"1":99.47},{"0":1451656800000,"1":99.46},{"0":1451660400000,"1":99.46},{"0":1451664000000,"1":99.47},{"0":1451667600000,"1":99.46},{"0":1451671200000,"1":99.46},{"0":1451674800000,"1":99.47},{"0":1451678400000,"1":99.7},{"0":1451682000000,"1":99.48},{"0":1451685600000,"1":99.66},{"0":1451689200000,"1":99.69},{"0":1451692800000,"1":99.69},{"0":1451696400000,"1":99.7},{"0":1451700000000,"1":99.7},{"0":1451703600000,"1":99.7},{"0":1451707200000,"1":99.69},{"0":1451710800000,"1":99.69},{"0":1451714400000,"1":99.69},{"0":1451718000000,"1":99.69},{"0":1451721600000,"1":99.46},{"0":1451725200000,"1":99.46},{"0":1451728800000,"1":99.45},{"0":1451732400000,"1":99.45},{"0":1451736000000,"1":99.45},{"0":1451739600000,"1":99.43},{"0":1451743200000,"1":99.44},{"0":1451746800000,"1":99.44},{"0":1451750400000,"1":99.44},{"0":1451754000000,"1":99.43},{"0":1451757600000,"1":99.44},{"0":1451761200000,"1":99.64},{"0":1451764800000,"1":99.61},{"0":1451768400000,"1":99.62},{"0":1451772000000,"1":99.41},{"0":1451775600000,"1":99.42},{"0":1451779200000,"1":99.41},{"0":1451782800000,"1":99.39},{"0":1451786400000,"1":99.41},{"0":1451790000000,"1":99.4},{"0":1451793600000,"1":99.4},{"0":1451797200000,"1":99.4},{"0":1451800800000,"1":99.41},{"0":1451804400000,"1":99.41},{"0":1451808000000,"1":99.38},{"0":1451811600000,"1":99.37},{"0":1451815200000,"1":99.33},{"0":1451818800000,"1":99.36},{"0":1451822400000,"1":99.36},{"0":1451826000000,"1":99.35},{"0":1451829600000,"1":99.35},{"0":1451833200000,"1":99.37},{"0":1451836800000,"1":99.28},{"0":1451840400000,"1":99.24},{"0":1451844000000,"1":99.26},{"0":1451847600000,"1":99.25},{"0":1451851200000,"1":99.57},{"0":1451854800000,"1":99.39},{"0":1451858400000,"1":99.43},{"0":1451862000000,"1":99.43},{"0":1451865600000,"1":99.43},{"0":1451869200000,"1":99.42},{"0":1451872800000,"1":99.42},{"0":1451876400000,"1":99.41},{"0":1451880000000,"1":99.41},{"0":1451883600000,"1":99.41},{"0":1451887200000,"1":99.41},{"0":1451890800000,"1":99.38},{"0":1451894400000,"1":99.37},{"0":1451898000000,"1":99.31},{"0":1451901600000,"1":99.22},{"0":1451905200000,"1":99.2},{"0":1451908800000,"1":99.22},{"0":1451912400000,"1":99.23},{"0":1451916000000,"1":99.25},{"0":1451919600000,"1":99.3},{"0":1451923200000,"1":99.37},{"0":1451926800000,"1":99.42},{"0":1451930400000,"1":99.42},{"0":1451934000000,"1":99.4},{"0":1451937600000,"1":99.4},{"0":1451941200000,"1":99.4},{"0":1451944800000,"1":99.4},{"0":1451948400000,"1":99.4},{"0":1451952000000,"1":99.37}],"animator":{"start":0,"steps":145 - 1,"duration":3000,"direction":"right"}}]

$.plotAnimator($('#chart1'), data_ajax, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="chart1" style="width: 540px; height: 250px;">