10点后如何从图表中删除旧数据点？

Question

我正在使用 chartist 绘制我的数据，并且我正在动态更新图表，但图表看起来并不好，因为它一遍又一遍地附加值。我想在第 11 个数组数据追加时删除第一个数组元素。

基本上我只想在屏幕上显示 10 个点。我怎么能做到这一点？我正在使用 python 烧瓶进行网络编程，数据来自 arduino 并使用 chartist 库。

这是使用的 JavaScript。

var mychart;
var now = new Date().getTime();
var getdata = $.get('/a');
getdata.done(function(r) {

   var data = { 
      labels: [
       ],  
      series: [ 
         r.r
       ]
     }; 

    var options = {
       width : 1200,
       height : 300 
    }  
    mychart = new Chartist.Line('.ct-chart', data, options);
});

var myupdate = setInterval(updatechart,1000);
function updatechart() {
    var updatedata = $.get('/a');
    updatedata.done(function(r) {
        var data = { 
           labels: [
            ],  
           series: [ 
              r.r
            ]
        }; 

        mychart.update(data);
    });
}

这是我的 Python 代码。我在哪里从 arduino 读取连续数据。

from flask import  Flask, render_template,request,redirect, url_for,jsonify
import flask
from shelljob import proc
import time
import eventlet
eventlet.monkey_patch()
from flask import Response
import serial
from time import time,gmtime,strftime
from datetime import datetime
import json

app = flask.Flask(__name__)
lj= serial.Serial( '/dev/ttyACM0' ,9600)

@app.route('/')
def home():
    return render_template('dynamic2.html')

v=[]
@app.route('/a')
def a():
    if (lj.inWaiting()>0):
        mydata= lj.readline() 
        v.append(mydata)    
        print mydata

    return jsonify({'r':v})

if __name__ == '__main__':
    app.run(debug=True)

Answer 1

如果我理解正确，你想要的是使用前 10 个返回的项目，所以你应该改变

r.r

到

r.r.splice(r.r.length-10)

所以你总是保留最后 10 个元素

但这只会在客户端有所帮助。如果你不打算在客户端使用超过 10 个元素，那么你不应该从服务器发送它们。既然如此，你应该改变

return jsonify({'r':v})

到

return jsonify({'r':v[-10:]})

所以您只会将最后 10 个项目发送给客户端

如果您也不打算在服务器上使用超过 10 个元素，那么您应该更改

v.append(mydata)

到

v.append(mydata)
if len(v) > 10
  v.pop(0)

这样，每次你在列表中追加一个新项目时，如果超过 10 个项目，你就删除第一个

对于您的其他问题（如何将当前时间放在 x 轴上），您应该从服务器发送时间。既然你已经导入了时间，你可以这样做

v={'r':[],'t':[]}
@app.route('/a')
def a():
  if (lj.inWaiting()>0):
    mydata= lj.readline() 
    v['r'].append(mydata)
    v['t'].append(time.time())    
    print mydata
  return jsonify(v)

我并没有真正使用过 Chartist 库，但是快速浏览 its examples 告诉我这就是 labels 属性的用途。所以你应该更新你的 Javascript 到这个

updatedata.done(function(r) {
  var data = { 
    labels: r.t,  
    series: r.r
  }; 
  mychart.update(data);
});