Flask框架中利用Ajax制作动态折线图_flask 实现折线图实时变化

作者：小舞很执着 | 2024-08-02 12:27:45

踩

flask 实现折线图实时变化

制作动态折线图，在视图中需要两个函数，其一为页面函数，用于页面显示。另一个为折线图数据视图函数，用来生成数据传递给Ajax。

创建前端页面，名为image的html页面，然后准备视图函数：

函数一：关联HTML页面


#函数一：关联页面
@app.route('/')  #路由
def image():
    return render_template('image.html')

函数二：生成数据以json方式传回给Ajax

这里有个坑，传回Ajax的data数据是以字符串形式传回去的，而我们要使用的是字典形式，所以需要导入flask框架中的jsonify，jsonify的作用是：将数据转为json，并以字典的形式传回前端。

图表中我们以时间为x轴，10以内随机数为y轴


#函数二：生成数据
from flask import jsonify #数据转为json，并以字典的形式传回前端
import datetime,random #导入时间和随机数模块
@app.route('/setData/') #路由
def setData():
    now = datetime.datetime.now().strftime('%H:%M:%S')
    data = {'time':now,'data':random.randint(1,10)}
    return jsonify(data) #将数据以字典的形式传回

完整视图页面：


from flask import Flask,render_template
app = Flask(__name__)  #绑定app
 
#函数一：关联页面
@app.route('/')  #路由
def image():
    return render_template('image.html')
 
#函数二：生成数据
from flask import jsonify #数据转为json，并以字典的形式传回前端
import datetime,random #导入时间和随机数模块
@app.route('/setData/') #路由
def setData():
    now = datetime.datetime.now().strftime('%H:%M:%S')
    data = {'time':now,'data':random.randint(1,10)}
    return jsonify(data) #将数据以字典的形式传回
 
if __name__=='__main__':
    app.run()

然后在image.html页面中绘制静态折线图：

首先导入jQuery和chart包，由于历史遗留问题，导致我用的是chart1.x的包，与现在的2.x并不兼容，所以有些人会出现无法显示图像的问题，所以这里我导包直接使用网络资源。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="panel" height="330px" width="700px"> </canvas>  <!--折线图位置-->
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!--导入jQuery-->
<script src="/static/js/Chart.min.js"></script> <!--导入Chart-->
<script>
    $(function () {
        var can = $('#panel').get(0).getContext('2d'); /*绘制类型*/
        //定义图标的数据
        var canData = {
            labels:["a","b","c","d","e","f"], /*初始x轴数据*/
            datasets : [
                {
                    //折线的填充颜色
                    fillColor:"rgba(255,255,255,0.1)",
                    //线条颜色：
                    strokeColor:"rgba(255,255,0,1)",
                    //y轴初始数据：
                    data:[1,3,2,1,5,4]
                }
            ]
        };
        //绘制图片
        var line = new Chart(can).Line(canData);
    })
</script>
</body>
</html>

此时可以看到一个静态的折线图：

通过Ajax定时获取数据，制作动态数据

绘制好折线图后，通过Ajax获取视图中传过来的data字典，并每一秒更新一次：


  var int = setInterval(function () {  //设置定时器
           $.ajax(
               {
                   url:"/setData/", //从setData函数中获取数据
                   type:"get",
                   data:"",
                   success:function (data) {
                       line.addData(
                           [data["data"]], //y轴，因为同一个x轴可以有多个折线
                           data["time"]  //x轴
                       );
                       //保持x轴只有8个数据，要不随着时间推移x轴会越来越长
                       var len = line.datasets[0].points.length;
                       if(len>8){
                           line.removeData()
                       }
                   }
               }
           )
        },1000)

完整的前端页面代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="panel" height="330px" width="700px"> </canvas>  <!--折线图位置-->
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!--导入jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <!--导入jQuery-->
<script>
    $(function () {
        var can = $('#panel').get(0).getContext('2d'); /*绘制类型*/
        //定义图标的数据
        var canData = {
            labels:["a","b","c","d","e","f"], /*初始x轴数据*/
            datasets : [
                {
                    //折线的填充颜色
                    fillColor:"rgba(255,255,255,0.1)",
                    //线条颜色：
                    strokeColor:"rgba(255,255,0,1)",
                    //y轴初始数据：
                    data:[1,3,2,1,5,4]
                }
            ]
        };
        //绘制图片
        var line = new Chart(can).Line(canData);
        var int = setInterval(function () {  //设置定时器
           $.ajax(
               {
                   url:"/setData/", //从setData函数中获取数据
                   type:"get",
                   data:"",
                   success:function (data) {
                       line.addData(
                           [data["data"]], //y轴，因为同一个x轴可以有多个折线
                           data["time"]  //x轴
                       );
                       //保持x轴只有8个数据，要不随着时间推移x轴会越来越长
                       var len = line.datasets[0].points.length;
                       if(len>8){
                           line.removeData()
                       }
                   }
               }
           )
        },1000)
    })
 
</script>
</body>
</html>

最后动态效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/918597