基于Flask的数据可视化实现

酒鶄

已于 2024-07-26 23:38:43 修改

阅读量1.3k

点赞数 28

文章标签：信息可视化 flask python html css

于 2024-07-14 00:28:56 首次发布

本文链接：https://blog.csdn.net/m0_74320955/article/details/140401729

版权

在参加一些可视化项目中，我们可能有一些疑问，就包括如何将学到的数据可视化方法展现在前端网页或者其他前端开发程序中，接下来我将给大家介绍一种可视化的方法，仅供大家交流学习使用，不足之处请大家指正。

1.寻找可视化数据

在比赛的可视化开发中，都需要我们提供数据来源，以示数据的真实可靠，在我做的项目中，我在公共卫生科学数据中心中申请了一些疾控的数据用于可视化，因为数据不能公开出去，仅供申请者个人学习使用，这里我就自己编一些数据写上去做一个示例。

2.数据处理

年龄	日期	疾病名
年龄	日期	发病数(人)	发病率(1/10万)	死亡数(人)	死亡率(1/10万)
0-	2005年	20	0.001	2	-
0-	2006年	10	-	1	-
0-	2007年	15	0.1116	1	0.1116
0-	2008年	30	-	5	-
0-	2009年	14	-	0	-
0-	2010年	16	-	1	-

我这里按照我寻找的数据格式，写了一点数据进去（极简喽，也就用来示范下）

我们就做一个简单的05-10年发病人数的图，这里就是简单的获取对应的数据就行，如果数据多的话可能还有加和等操作。

def total(index="C:\\Users\\28950\Desktop\data.xls"):
    #     读取文件数据
    data=pd.read_excel(index)
    # 设置列名
    data.columns = ['age','date','a_total','a_rate','die_total','die_rate']
    # 获取countlist,即我们获取的可视化数据列表
    countlist=[]
    for i in data["a_total"][1::]:
        countlist.append(i)
    return countlist

这样就获取到了我们可视化的数据

3.使用pyecharts进行图形绘制

这里我们使用的是新版的pyecharts，因此在使用上还是参考这个官网上的使用，很多博客都还是旧版本的pyecharts，有很大的出入，具体有啥不同，相信你们写代码的时候吃吃亏就知道了。

def matp(countlist):
    # 创建折线图
    x_data=["05","06","07","08","09","10"]
    line = (
        Line()
        .add_xaxis(xaxis_data=x_data)
        .add_yaxis(
            series_name="Series 1",
            y_axis=countlist,
            # 这里可以添加类似LineItem的参数，但实际上是通过series的option来配置
            label_opts=opts.LabelOpts(is_show=False),
            itemstyle_opts=opts.ItemStyleOpts(color="blue"),
            markpoint_opts=opts.MarkPointOpts(
                data=[
                    opts.MarkPointItem(type_="max", name="最大值"),
                    opts.MarkPointItem(type_="min", name="最小值"),
                ]
            ),
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(title="折线图示例"),
            tooltip_opts=opts.TooltipOpts(trigger="axis"),
            yaxis_opts=opts.AxisOpts(
                type_="value",
                axistick_opts=opts.AxisTickOpts(is_show=True),
                splitline_opts=opts.SplitLineOpts(is_show=True),
            ),
            xaxis_opts=opts.AxisOpts(type_="category", boundary_gap=False),
        )
    )

    # 渲染图表到HTML文件，也可以直接在notebook中显示
    line.render("line_chart.html")

运行的结果：

4.html网页编写

我这里是这样的思路：我们先设计一个网页界面，再将绘制的图放置在网页指定的位置，以此达到在网页中动态更新图表的目的，可视化好不好看就取决于我们静态网页编写的怎么样了。

以下只是一个简单的网页代码，包含css的网页样式设置，以及基本的html元素（这些就大家自己下去找资料学习啦）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
<style>
        body {
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end; /* 将内容靠右对齐 */
            align-items: flex-start; /* 将内容靠顶部对齐 */
        }

        .dropdown {
            position: absolute; /* 绝对定位以准确放置下拉选框 */
            right: 20px; /* 距离右边20px */
            top: 20px; /* 距离顶部20px */
        }

        /* 下拉选框样式 */
        select {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body >
<div >{{htmlcode|safe}}</div>
<div class="dropdown">
    <select>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
        <option value="option4">选项4</option>
    </select>
</div>

</body>
</html>

        <div >{{htmlcode|safe}}</div>这段代码就是设置了一个变量来接收后端传过来的网页代码，safe就是告诉程序，这段代码是安全的html代码，有了这个才会将他编译成我们要的图表进行展示，不然就只是网页代码。之前我们是直接渲染成html文件的，要获取其中的html代码，那我们就要用pyecharts里面的另一个方法render_embed(),line自然是我们前面绘制好的图表容器。

<div>只是一个html里面的容器，我们可以很灵活的使用这些，别把我这段代码当成固定格式奥

5.Flask设计

Flask是一个轻量级的网页编程库，常用于中小型网页设计。我们这里就简单的使用一下，不深入研究他的用法。

第一，我们之前编写的网页文件需要放在templates文件夹下，这是因为他会默认的去这个文件夹里面寻找我们要渲染的文件，因此不管是没有这个文件夹还是没有将要渲染的文件放在这个文件夹下面，都会引发一些错误。

第二，我们要渲染模板的名字以及对应接收变量的变量名也得正确

这样才能将我们生成的htmlcode代码传递给网页文件中设置好的变量htmlcode

这部分代码如下：

from flask import Flask, render_template

import test

app = Flask(__name__)#这里把他当成固定的写就行


@app.route('/')#这里是根路径，简单来说就是我们启动这个代码运行后网页第一个展示的页面
#举个例子，我这个代码运行后可以看到浏览器地址栏是这样的http://127.0.0就是我的一个本机地址（我乱编的本机地址）
#假如我们配置了index这个路径，我们这里就可以在地址栏中http://127.0.0/index这样来访问，
# 配置这个路径的代码@app.route('/index'）这样就可以。当然，我们可以在html文件中设置跳转按钮等，实现相应的页面跳转功能
def index():
    # 使用我们刚写的代码生成网页代码
    data=test.total()
    htmlcode=test.matp(data)
    # 将变量传递给HTML模板
    return render_template('main.html', htmlcode=htmlcode)


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