Flask框架中利用Ajax制作动态折线图

最新推荐文章于 2023-06-29 01:10:51 发布

我是一只程序⚪

最新推荐文章于 2023-06-29 01:10:51 发布

阅读量3.2k

点赞数 3

分类专栏： Flask Python

本文链接：https://blog.csdn.net/weixin_39561473/article/details/86608661

版权

Python 同时被 2 个专栏收录

92 篇文章 6 订阅

订阅专栏

Flask

2 篇文章 0 订阅

订阅专栏

制作动态折线图，在视图中需要两个函数，其一为页面函数，用于页面显示。另一个为折线图数据视图函数，用来生成数据传递给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>

最后动态效果如下：

我是一只程序⚪

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
11
评论
Flask框架中利用Ajax制作动态折线图

制作动态折线图，在视图中需要两个函数，其一为页面函数，用于页面显示。另一个为折线图数据视图函数，用来生成数据传递给Ajax。创建前端页面，名为image的html页面，然后准备视图函数：函数一：关联HTML页面#函数一：关联页面@app.route('/') #路由def image(): return render_template('image.html')...
复制链接

扫一扫

专栏目录