Sqlite 在python中使用Flask/SQLAlchemy限制Chart.js中的数据

大家好

我想使用Chart.js图形以折线图的形式显示温度和湿度数据。我在SQlite中有两个带有传感器和温度/湿度值的表。我成功地渲染了一个模板，并为每个传感器生成了一个图形。现在，我需要将每个传感器的值传递到图表中，对我来说，这是一个棘手的部分。它必须是每个图表的最后30个传感器读数，并按时间排序

背景信息

在动物园里，我想监控多个展品和水族馆的温度和湿度。对于每个传感器，我想在页面上显示一个图表，显示该特定传感器的最后30个值。数据存储在数据库中。我希望以这种方式编写代码，这样，如果我添加一个传感器，它会自动在页面上为该特定传感器添加一个图形，并显示该传感器的最后30个值。用另一种方式澄清它：在一页上，我希望每个传感器都有一个带有最后30个值的图表

我可以想象我必须对查询做些什么，比如：

Sensorreading.query.filter_by(name=name).order_by(time.desc()).limit(30)

但对我来说，困难在于限制每个传感器的数据，例如：

sensors = session.query(Sensor).all()
for sensor in sensors:
    reading = session.query(Sensor.readings).order_by(id.desc()).limit(30)

我已经明白，使用python/query进行过滤比使用jinja代码更好

我知道每个传感器的数据图表，并得到每个传感器的漂亮图表。现在只有最后一步限制每个图形的数据

SQlite3的型号：

class Sensor(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    sensor_type = db.Column(db.Integer)
    pin = db.Column(db.Integer)
    limit_temp_up = db.Column(db.Float)
    limit_temp_down = db.Column(db.Float)
    limit_hum_up = db.Column(db.Float)
    limit_hum_down = db.Column(db.Float)
    limit_aqua_temp_up = db.Column(db.Float)
    limit_aqua_temp_down = db.Column(db.Float)
    readings = db.relationship('Sensorreading', backref='sensor')

class Sensorreading(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    time = db.Column(db.DateTime)
    name = db.Column(db.String(50))
    temp_value = db.Column(db.Float)
    hum_value = db.Column(db.Float)
    aqua_temp_value = db.Column(db.Float)
    sensor_id = db.Column(db.Integer, db.ForeignKey('sensor.id'))

@app.route('/sensorlog')
def sensorlog():
    results = Sensor.query.order_by(Sensor.id.asc()).all()
    if results > 0:
        return render_template('sensorlog.html', sensors=results)
    else:
        msg = 'No Sensors Found'
        return render_template('sensorlog.html', msg=msg)

{% extends 'layout.html' %}

{% block body %}
    <h2><b>Sensor Log</b></h2>
    <hr>
    <div class="container">
        {% for sensor in sensors %}
            <div class="row">
                <div class="col-md-12">
                    <h4><b>{{ sensor.name }}</b></h4>
                    <canvas id='sensor_chart_{{ sensor.id }}' width='800' height='300'></canvas>
                </div>
            </div>
            <br>
            <hr>
            <br>
        {% endfor %}
    </div>
{% endblock %}

{% block tail %}
    <script src="/static/js/Chart.min.js"></script>
    <script>
        function buildChart(id, labels, humidity, temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dhtChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Temperature (Celsius)",
                            borderColor: "rgba(255, 255, 0, 1)",
                            fillColor: "rgba(225, 225, 0, 1)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(225, 225, 0, 1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: temperature
                        },
                        {
                            label: "Humidity (%)",
                            borderColor: "rgba(0, 128, 255, 1)",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: humidity
                        }
                    ]
                },
                Options: {

                }
            });
        }
        $(document).ready(function() {
            {% for sensor in sensors %}
                console.log('{{ sensor.name }}');
                buildChart('#sensor_chart_{{ sensor.id }}', 
                ["{{ sensor.readings|join('\",\"', attribute='time')|safe }}"], 
                [{{ sensor.readings|join(',', attribute='hum_value') }}], 
                [{{ sensor.readings|join(',', attribute='temp_value') }}]);
            {% endfor %}
        });
    </script>
{% endblock %}

渲染模板代码：

class Sensor(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    sensor_type = db.Column(db.Integer)
    pin = db.Column(db.Integer)
    limit_temp_up = db.Column(db.Float)
    limit_temp_down = db.Column(db.Float)
    limit_hum_up = db.Column(db.Float)
    limit_hum_down = db.Column(db.Float)
    limit_aqua_temp_up = db.Column(db.Float)
    limit_aqua_temp_down = db.Column(db.Float)
    readings = db.relationship('Sensorreading', backref='sensor')

class Sensorreading(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    time = db.Column(db.DateTime)
    name = db.Column(db.String(50))
    temp_value = db.Column(db.Float)
    hum_value = db.Column(db.Float)
    aqua_temp_value = db.Column(db.Float)
    sensor_id = db.Column(db.Integer, db.ForeignKey('sensor.id'))

@app.route('/sensorlog')
def sensorlog():
    results = Sensor.query.order_by(Sensor.id.asc()).all()
    if results > 0:
        return render_template('sensorlog.html', sensors=results)
    else:
        msg = 'No Sensors Found'
        return render_template('sensorlog.html', msg=msg)

{% extends 'layout.html' %}

{% block body %}
    <h2><b>Sensor Log</b></h2>
    <hr>
    <div class="container">
        {% for sensor in sensors %}
            <div class="row">
                <div class="col-md-12">
                    <h4><b>{{ sensor.name }}</b></h4>
                    <canvas id='sensor_chart_{{ sensor.id }}' width='800' height='300'></canvas>
                </div>
            </div>
            <br>
            <hr>
            <br>
        {% endfor %}
    </div>
{% endblock %}

{% block tail %}
    <script src="/static/js/Chart.min.js"></script>
    <script>
        function buildChart(id, labels, humidity, temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dhtChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Temperature (Celsius)",
                            borderColor: "rgba(255, 255, 0, 1)",
                            fillColor: "rgba(225, 225, 0, 1)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(225, 225, 0, 1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: temperature
                        },
                        {
                            label: "Humidity (%)",
                            borderColor: "rgba(0, 128, 255, 1)",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: humidity
                        }
                    ]
                },
                Options: {

                }
            });
        }
        $(document).ready(function() {
            {% for sensor in sensors %}
                console.log('{{ sensor.name }}');
                buildChart('#sensor_chart_{{ sensor.id }}', 
                ["{{ sensor.readings|join('\",\"', attribute='time')|safe }}"], 
                [{{ sensor.readings|join(',', attribute='hum_value') }}], 
                [{{ sensor.readings|join(',', attribute='temp_value') }}]);
            {% endfor %}
        });
    </script>
{% endblock %}

Jinja代码生成图（sensorlog.html）：

class Sensor(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    sensor_type = db.Column(db.Integer)
    pin = db.Column(db.Integer)
    limit_temp_up = db.Column(db.Float)
    limit_temp_down = db.Column(db.Float)
    limit_hum_up = db.Column(db.Float)
    limit_hum_down = db.Column(db.Float)
    limit_aqua_temp_up = db.Column(db.Float)
    limit_aqua_temp_down = db.Column(db.Float)
    readings = db.relationship('Sensorreading', backref='sensor')

class Sensorreading(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    time = db.Column(db.DateTime)
    name = db.Column(db.String(50))
    temp_value = db.Column(db.Float)
    hum_value = db.Column(db.Float)
    aqua_temp_value = db.Column(db.Float)
    sensor_id = db.Column(db.Integer, db.ForeignKey('sensor.id'))

@app.route('/sensorlog')
def sensorlog():
    results = Sensor.query.order_by(Sensor.id.asc()).all()
    if results > 0:
        return render_template('sensorlog.html', sensors=results)
    else:
        msg = 'No Sensors Found'
        return render_template('sensorlog.html', msg=msg)

{% extends 'layout.html' %}

{% block body %}
    <h2><b>Sensor Log</b></h2>
    <hr>
    <div class="container">
        {% for sensor in sensors %}
            <div class="row">
                <div class="col-md-12">
                    <h4><b>{{ sensor.name }}</b></h4>
                    <canvas id='sensor_chart_{{ sensor.id }}' width='800' height='300'></canvas>
                </div>
            </div>
            <br>
            <hr>
            <br>
        {% endfor %}
    </div>
{% endblock %}

{% block tail %}
    <script src="/static/js/Chart.min.js"></script>
    <script>
        function buildChart(id, labels, humidity, temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dhtChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Temperature (Celsius)",
                            borderColor: "rgba(255, 255, 0, 1)",
                            fillColor: "rgba(225, 225, 0, 1)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(225, 225, 0, 1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: temperature
                        },
                        {
                            label: "Humidity (%)",
                            borderColor: "rgba(0, 128, 255, 1)",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: humidity
                        }
                    ]
                },
                Options: {

                }
            });
        }
        $(document).ready(function() {
            {% for sensor in sensors %}
                console.log('{{ sensor.name }}');
                buildChart('#sensor_chart_{{ sensor.id }}', 
                ["{{ sensor.readings|join('\",\"', attribute='time')|safe }}"], 
                [{{ sensor.readings|join(',', attribute='hum_value') }}], 
                [{{ sensor.readings|join(',', attribute='temp_value') }}]);
            {% endfor %}
        });
    </script>
{% endblock %}

{%extends'layout.html%}
{%block body%}
传感器日志

{传感器%中的传感器的百分比}
{{sensor.name}





{%endfor%}
{%endblock%}
{%block tail%}
功能构建图（id、标签、湿度、温度）{
var ctx=$（id）.get（0）.getContext（'2d'）；
var dhtChart=新图表（ctx{
键入：“行”，
数据：{
标签：标签，
数据集：[
{
标签：“温度（摄氏度）”，
边框颜色：“rgba（255，255，0，1）”，
fillColor:“rgba（225,225,0,1）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（225,225,0,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：温度
},
{
标签：“湿度（%）”，
边框颜色：“rgba（0，128，255，1）”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：湿度
}
]
},
选项：{
}
});
}
$（文档）.ready（函数（）{
{传感器%中的传感器的百分比}
log（“{sensor.name}}”）；
构建图（“#传感器_图{{{sensor.id}}”），
[“{sensor.readings | join（'\'，\''，attribute='time'）| safe}}”]，
[{{sensor.readings | join（'，'，attribute='hum_value'）}}]，
[{{sensor.reads | join（'，，attribute='temp_value'）}}]；
{%endfor%}
});
{%endblock%}

我找不到解决这个问题的办法，所以希望有人能帮我。欢迎提供任何提示、技巧、代码帮助或指向有用信息的链接。任何关于当前代码的评论和建议都是非常感谢的，我只是他的第一个项目的初学者

---

提前感谢您提供的每一个帮助。

您的建议很接近。您希望筛选正在使用的传感器的读数查询，并按时间排序查询

如果您在路线中执行类似操作：

@app.route('/sensorlog')
def sensorlog():
    sensors = Sensor.query.order_by(Sensor.id.asc()).all()
    if sensors > 0:
        readings = {}
        for sensor in sensors:
            readings[sensor.id] = session.query(
                Sensor.readings
            ).filter_by(
                id=sensor.id
            ).order_by(
                time.desc()
            ).limit(30)
        return render_template('sensorlog.html', sensors=sensors, readings=readings)
    else:
        msg = 'No Sensors Found'
        return render_template('sensorlog.html', msg=msg)

您现在应该发送每个传感器的结果对象以及传感器信息

然后在jinja模板中，您只需更改调用

buildChart（）

的javascript，以便

标签、湿度和温度

参数访问

读数[sensor.id]

---

希望这是有道理的，如果没有访问数据或应用程序的权限，就有点难通过。

谢谢，今晚我将尝试一下。是的，我可以想象，如果设计代码时不考虑全局，会有点痛苦。我会让你知道我是否能让它工作。不用担心。如果有帮助，请接受我的正确答案：）