Python 使用flask和jquery使用chartjs和MongoDB中的数据绘制故障图表_Python_Mongodb_Flask

Python 使用flask和jquery使用chartjs和MongoDB中的数据绘制故障图表

python mongodb flask

Python 使用flask和jquery使用chartjs和MongoDB中的数据绘制故障图表,python,mongodb,flask,Python,Mongodb,Flask,我想创建一个折线图，用两条线显示两个不同的数据。下面显示的是我想要实现的示例图下面显示的是我在MongoDB中存储的当前集合。下面的代码是我创建的flask应用程序，“/”route用于显示页面，“/data”route用于图表检索数据 from flask import Flask, render_template, jsonify import pymongo from flask_pymongo import PyMongo app = Flask(__name__) app

我想创建一个折线图，用两条线显示两个不同的数据。下面显示的是我想要实现的示例图

下面显示的是我在MongoDB中存储的当前集合。

下面的代码是我创建的flask应用程序，“/”route用于显示页面，“/data”route用于图表检索数据

from flask import Flask, render_template, jsonify
import pymongo
from flask_pymongo import PyMongo

app = Flask(__name__)

app.config["MONGO_URI"] = "mongodb://localhost:27017/mydb"
mongo = PyMongo(app)

client = pymongo.MongoClient('localhost',27017)
db = client['mydb']

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

@app.route("/data")
def data():
    line1 = db.trolley1
    line2 = db.trolley2

    results1 = line1.find()
    results2 = line2.find()

    return jsonify({'results': results1["temperature"]}), jsonify({'results': results2["temperature"]})

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

下面的代码是我的html，我的图表就是在这里编码的

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="../static/SmartTrolley.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="graph">
    <canvas id="chart"></canvas>
        <script>
        var ctx = document.getElementById('chart').getContext('2d')
        var getData = $.get('/data');
        getData.done(function(results) {
            var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Tue 11','3am', '6am', '9am', '12pm', '3pm', '6pm', '9pm', 'Wed 12'],
                datasets: [{
                    label: "trolley1",
                    fill: false,
                    data: results.results,
                    borderWidth: 1,
                    borderColor: 'black',
                }, {
                    label: "trolley2",
                    fill: false,
                    data: results.results,
                    borderWidth: 1,
                    borderColor: 'red',
                }]
            },
            options: {
                legend: {
                    position: 'top',
                    align: 'start'
                },
                title: { 
                    display: 'true',
                    fontSize: 15,
                    text: 'Temperature recordings'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            max: 30,
                            min: 12,
                            beginAtZero: false,
                        }
                    }]
                }
            }
        });
    })
        </script>
    </div>


var ctx=document.getElementById（'chart'）.getContext（'2d'））
var getData=$.get（'/data'）；
getData.done（函数（结果）{
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[“星期二11”，“凌晨3点”，“早上6点”，“上午9点”，“下午12点”，“下午3点”，“下午6点”，“晚上9点”，“星期三12点]，
数据集：[{
标签：“电车1号”，
填充：假，
数据：结果，
边框宽度：1，
边框颜色：“黑色”，
}, {
标签：“电车2”，
填充：假，
数据：结果，
边框宽度：1，
边框颜色：“红色”，
}]
},
选项：{
图例：{
位置：'顶部'，
对齐：“开始”
},
标题：{
显示：“true”，
尺寸：15，
文字：“温度记录”
},
比例：{
雅克斯：[{
滴答声：{
最高：30，
民:12,，
贝吉纳泽罗：错，
}
}]
}
}
});
})

但是，当我运行flask应用程序时，“/data”路径显示错误“TypeError:索引'temperature'无法应用于游标实例”。此外，图形根本没有显示任何内容，包括x轴和y轴的标签。如果有人能帮上忙，我会非常感激。谢谢大家!

find（）

返回光标。如果需要一条记录，则应使用：

results1 = line1.find_one()
results2 = line2.find_one()