Flask+plotly实现数据可视化


第一次接触Flask+plotly，过程中踩了很多坑，最后总算达到了目标，给大家分享一下，让每一个初学者都能很快上手plotly。

安装依赖库：

1
2
3
4
pip install flask
pip install plotly
pip install pandas
pip install numpy

创建flask应用程序：

首先进入项目文件夹，然后创建并进入虚拟环境，创建flask程序

1
2
3
4
cd 项目目录
python -m venv venv
venv\Scripts\activate
pip install Flask

创建后项目目录如下，create_bar.py和index.html是我后来添加的
在这里插入图片描述

生成测试数据：

新建models文件夹，在models文件夹内新建create_bar.py文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import plotly as py
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import json

def new_create_plot():
    pyplt = py.offline.plot
    #---以下因为图形和数据不同而不同，以下需要修改---
    N = 40
    x = np.linspace(0, 1, N)
    y = np.random.randn(N)
    df = pd.DataFrame({<!-- -->'x': x, 'y': y}) # creating a sample dataframe
    trace0 = go.Bar(
        x=df['x'], # assign x as the dataframe column 'x'
        y=df['y']
    )
    data = [trace0]
    layout = go.Layout(
        title='xxx可视化作图',
    )
    fig = go.Figure(data=data, layout=layout)
    jsfig=fig.to_json()
    return jsfig

这里面使用了to_json()把数据转换成了json的形式，便于前后端分离的系统使用，下面是plotly官网对to_json()的介绍
在这里插入图片描述

配置路由：

app.py文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
from flask import Flask
from flask_cors import CORS
from flask import Flask, render_template
from models import create_bar
app = Flask(__name__)
CORS(app)

@app.route('/', methods=['GET'])
def ping_pong():
    bar = create_bar.new_create_plot()
    return bar

@app.route('/index')
def index():
    context = create_bar.new_create_plot()
    return render_template("index.html",
        title = 'Home',
        context = context)

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

我们这里做的是直接访问时返回纯数据，访问/index时以图表的形式显示数据，方便做对比。

前端显示：

index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plotly嵌入Flask可视化作图案例</title>
    <style type="text/css">
        div.content {<!-- -->padding: 1em 5em;}
        div.graph {<!-- -->margin: 10px auto;
                   width: 80%;}
    </style>
   <!--导入在线js库文件-->
   <script type="text/javascript" src="//i2.wp.com/cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class='content'>
    <h2>用Python和plotly结合flask可视化作图</h2>
    <div>
        <p>
         文字部分，可自定义设置。
        </p>
        <p>
            文字部分，可自定义设置：
        </p>
    </div>
    <div class='graph' id='myDiv'>
    <!--展现可视化图标部分-->
    <script>
        var bars = '{<!-- -->{ context | safe }}';
        var obj = JSON.parse(bars);
        Plotly.newPlot('myDiv', obj);
    </script>
   </div>
    <div>
        <p>从图上可以看出，文字部分，可自定义设置</p>
    </div>
</div>
</body>
</html>

这里有一个坑是Plotly.newPlot的数据在js中必须是json对象类型，一开始从后端传来的是json字符串的格式，调了无数次，最终用JSON.parse成功转成了需要的类型，然后就可以顺利输出了。

以下是plotly官网对JavaScript如何使用plotly的介绍

1
2
3
4
5
6
7
8
9
var data = [
  {<!-- -->
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('myDiv', data);

可以看出来data是object类型

结果：

图表的形式
在这里插入图片描述
纯数据
在这里插入图片描述

小结：

刚开始接触plotly时，通过网上现有教程可以入门，但如果想要进一步提升自己还是得去官网上看文档，把每一个api都了解一下，这样才能够运用自如。因为涉及前端，所以光学会python也不够工作中使用，还需要学习JavaScript和html、css