Python：Flaskを使ってグラフを表示するWebアプリのサンプルコード

2022年8月2日 21:43

本記事のサンプルコードは書籍「スマホでPythonを始めよう。Android & Termux 編」の【サンプルプログラム4】になります。

まず、こちらがソースコードのアーカイブファイルです。

詳しいセットアップ方法は書籍内にまとめておりますのでご参考ください。

各ファイルのソースコードは以下です。

【app.py】

# -*- coding: utf-8 -*-
from flask import Flask, render_template, request, redirect, url_for
import threading
import subprocess
from time import sleep
from table import make_x_list,make_y_list,make_graph
from table_gen import table_cooking

app = Flask(__name__)

#threadingで自動で立ち上げる
def auto_open():
    sleep(2.4)
    print('WEBで表示します。')
    try:
        subprocess.check_call("termux-open http://127.0.0.1:5000/",shell=True)
    except:
        print('コマンドが機能しませんでした。手動でhttp://127.0.0.1:5000/へアクセスして下さい。')

def html_source(html_file):
    url = './templates/' + html_file
    with open(url) as f:
        reader = f.read()
    reader = reader.replace('<html>\n<head><meta charset="utf-8" /></head>\n<body>','')
    reader = reader.replace('</body>\n</html>','')
    return reader


@app.route('/',methods=['GET'])
def get_posi():
    x = make_x_list()
    y = make_y_list()
    make_graph(x,y)
    data = table_cooking(y)
    return render_template('index.html',\
        data = '<p class="spacer">以下のデータをグラフで表示します。</p>' + data)

@app.route('/bo')
def bo():
    html_file = 'bo.html'
    data = html_source(html_file)
    return render_template('index.html',\
        data = data)


@app.route('/oresen')
def oresen():
    html_file = 'oresen.html'
    data = html_source(html_file)
    return render_template('index.html',\
        data = data)


@app.route('/en')
def en():
    html_file = 'en.html'
    data = html_source(html_file)
    return render_template('index.html',\
        data = data)


@app.route('/refresh')
def refresh():
    x = make_x_list()
    y = make_y_list()
    make_graph(x,y)
    data = table_cooking(y)
    return render_template('index.html',\
        data = '<p class="spacer">データをランダムにリフレッシュしました。</p>' + data)


if __name__ == '__main__':
    sub= threading.Thread(target=auto_open)
    sub.start()
    app.run()

【table.py】

import plotly.graph_objects as go
import random

#リストを自動で作成する
def make_x_list():
    x_list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    return x_list


def make_y_list():
    y = []
    for i in range(12):
        data = random.randint(1,99)
        y.append(data)
    return y


#グラフを作る
def make_graph(x,y):
    graph = go.Bar(x=x, y=y)
    go.Figure(graph).write_html('./templates/bo.html')
    graph = go.Scatter(x=x, y=y)
    go.Figure(graph).write_html('./templates/oresen.html')
    graph = go.Pie(labels=x, values=y)
    go.Figure(graph).write_html('./templates/en.html')


if __name__ == '__main__':
    x = make_x_list()
    y = make_y_list()
    make_graph(x,y)

【table_gen.py】

y = [22, 51, 76, 83, 96, 48, 72, 15, 22, 35, 68, 8]

def table_cooking(y):
    cell = ''
    part1 = '<table class="termux_table"><tr style="text-align: center;"><td>1月</td><td>2月</td><td>3月</td><td>4月</td><td>5月</td><td>6月</td><td>7月</td><td>8月</td><td>9月</td><td>10月</td><td>11月</td><td>12月</td></tr><tr style="text-align: center;">'
    for e in y:
        cell += '<td>' + str(e) + '</td>'

    product = part1 + cell + '</tr></table>'
    return product


if __name__ == '__main__':
    print(table_cooking(y))

【index.html】

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/style.css">
    <title>Random GRAPH</title>
</head>
<body>
<h1>Random GRAPH</h1>
<button class="app-btn"><a href="/bo">棒グラフ</a></button><button class="app-btn"><a href="/oresen">折れ線</a></button><button class="app-btn"><a href="/en">円グラフ</a></button><button class="app-btn"><a href="/refresh">更 新</a></button>
<p></p>
{{data | safe}}
</body>
</html>

【style.css】

body {
 font-family: sans-serif;
 color: #333;
}
.spacer {
 padding-top: 10vh;
}
.termux_table {
 width: 95%;
 table-layout: fixed;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 background-color: #13c3ac;
 word-break: break-all;
 word-wrap: break-all;
}
.termux_table td {
 padding: 1px;
 padding-top: 0.5em;
 padding-bottom: 1em;
 color: #333;
 border: solid 1px #FFF;
}
.app-btn {
 display: inline-block;
 padding: .5em 1em;
 border: 3px solid #333;
 border-radius: .25em;
 background-color: #FFF;
}
.app-btn a {
 text-decoration: none;
 color: #333;
 font-weight: bold;
 transition: .3s;
}
.app-btn a:hover {
 background: #13c3ac;
}

以上の５つのファイルです。

ファイル&フォルダ構成

Graph （フォルダ）
- app.py
- table.py
- table_gen.py
- templates (フォルダ）
-- index.html
-- bo.html
-- oresen.html
-- en.html
- static （フォルダ）
-- style.css

（bo.html / oresen.html / en.html は自動生成されるので、初期設定時には必要ありません。）

必要なライブラリ：flask / plotly

pip3 install plotly
pip3 install flask

などの方法でflask とplotly をインストールして下さい。

サンプルプログラム、各ファイルの詳細は本書籍「書籍「スマホでPythonをはじめよう」内で行っておりますので、そちらをご覧いただけますと嬉しいです。

この記事が気に入ったらサポートをしてみませんか？