Question

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

基本上我只想在屏幕上只显示10个点。我怎么能这样做？我正在使用python flask进行Web编程，数据来自arduino并使用图表库。

以下是使用的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);
});

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

1 个答案: