chelseaNB1 2022-06-21 21:13 采纳率: 75.7%
浏览 93
已结题

请问如何在网页上利用数据库的数据作图并展示出来

目前设计了一个网页，用户可以通过excel上传数据到数据库，下一步我想在网页上增加一个按钮，点击这个按钮，用户可以把他所上传的数据与我的数据通过图片进行对比（python代码已经写好，就是不知道怎么应用到flask框架中在网页展示出来）。或者还有没有其他的解决办法，如果解决必定采纳！感谢！！（下面是我写的代码，其实就是机械地和路由结合起来，想的是作图保存好以后，一点击按钮，展示图片）

from flask import Flask, render_template, request
import pymysql
import xlrd
import numpy as np
import matplotlib as mp

@app.route("/seedling/sevendays/figure1")
def index6():
    kwargs = {
        "host": "localhost",
        "port": 3306,
        "user": "root",
        "passwd": "10868325",
        "database": "lxd",
        "charset": "utf8"
    }
    db = pymysql.connect(**kwargs)
    cur = db.cursor()
    sql1 = "select R400,R401 from four_ss_seven where id=1;"
    cur.execute(sql1)
    a = []
    for row in cur:
        a.append(np.array(row))
    arr1 = np.array(a).T
    # print(arr1)
    # print(arr1.shape)
    sql2 = "SELECT R400,R401 FROM four_ss_seven ORDER BY id DESC LIMIT 1;"
    cur.execute(sql2)
    b = []
    for row in cur:
        b.append(np.array(row))
    arr2 = np.array(b).T
    # print(arr2)
    # print(arr2.shape)
    com = np.array([arr1, arr2]).T
    com1 = np.reshape(com, (601, 2))
    # print(com1)
    # print(com1.shape)
    arr3 = np.arange(400, 1001)
    mp.figure(figsize=(8, 6), dpi=100)
    mp.plot(arr3, com1, linestyle='-')
    mp.xlabel(s='wavelength', fontsize=18)
    mp.ylabel(s='reflectance', fontsize=18)
    mp.title(s='spectral reflectance curve', fontsize=25)
    mp.savefig('./static/img/1.png')
    return render_template("sd_seven_fig1.html")
  • 写回答

6条回答 默认 最新

  • 溪风沐雪 2022-06-22 09:20
    关注

    思路其实有多种，如你所说用户数据现在是可以上传了的，也就是说实际上你现在需要的是读取用户数据和你的数据，展示到同一个图表中，这个有很多种方案：
    1、类似于你现在的方案，把数据绘图保存图片，然后把图片展示到前端，这个不是很推荐
    2、利用pyecharts库，在后端把数据封装成option对象，然后给前端展示
    3、把后端数据处理一下，直接发到前端，前端用echarts组件展示
    以下是第3种方案的一个简单例子

    import json
from random import randint
from flask import Flask, render_template
import numpy as np
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('show.html')

@app.route("/getdata")
def getData():
    y1 = [randint(1,100) for i in range(1,10)]
    y2 = [randint(1,100) for i in range(1,10)]
    x = [1,2,3,4,5,6,7,8,9]
    data = {}
    data['x'] = x
    data['y1'] = y1
    data['y2'] = y2
    print(data)
    return json.dumps(data,ensure_ascii=False)
if __name__ == "__main__":
    app.run()

    show.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script>
        $(document).ready(function () {
            var main = echarts.init(document.getElementById("main"))
            $.get('/getdata', function (resp) {
                data = eval("(" + resp + ")")
                option = {
                    title: {
                        text: 'Line'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['y1', 'y2']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data['x']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'y1',
                            type: 'line',
                            stack: 'Total',
                            data: data['y1']
                        },
                        {
                            name: 'y2',
                            type: 'line',
                            stack: 'Total',
                            data: data['y2']
                        }
                    ]
                };
                main.setOption(option);
            });
        });
    </script>
</head>

<body>
    <div id="main" style='width: 800px;height:500px'></div>
</body>

</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 7月1日
  • 已采纳回答 6月23日
  • 创建了问题 6月21日

悬赏问题

  • ¥15 删除虚拟显示器驱动 删除所有 Xorg 配置文件 删除显示器缓存文件 重启系统 可是依旧无法退出虚拟显示器
  • ¥15 vscode程序一直报同样的错，如何解决?
  • ¥15 关于使用unity中遇到的问题
  • ¥15 开放世界如何写线性关卡的用例(类似原神）
  • ¥15 关于并联谐振电磁感应加热
  • ¥60 请查询全国几个煤炭大省近十年的煤炭铁路及公路的货物周转量
  • ¥15 请帮我看看我这道c语言题到底漏了哪种情况吧！
  • ¥66 如何制作支付宝扫码跳转到发红包界面
  • ¥15 pnpm 下载element-plus
  • ¥15 解决编写PyDracula时遇到的问题