【Django】一次関数表示アプリを作成（Matplotlibでグラフを表示）［Python］

2021年12月15日2022年12月9日

URLをコピーしました！

Django

前回は初期値を持ったフォームを作成する方法を解説しました。

あわせて読みたい

【Django】一次関数表示アプリを作成（フォームの設定）［Python］ Django 前回、新しいWebアプリ「一次関数表示アプリ」を作成する準備をしました。今回は一次関数表示アプリのプログラムを解説していきましょう。今回、いじるファイ…

今回はMatplotlibを使って、グラフを表示していきたいと思います。

今回使うファイルは「/webapp/linearfunction/templates/linearfunction/index.html」と「/webapp/linearfunction/views.py」の二つです。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates
│   │   └── linearfunction
│   │       └── index.html <- 修正
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── forms.py
│   └── views.py     <- 修正
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

それでは始めていきましょう。

/webapp/linearfunction/views.py

views.pyの修正後のプログラムはこうなります。

from django.shortcuts import render
from django.http import HttpResponse
from .forms import LFForm
import matplotlib
matplotlib.use('Agg')
from matplotlib import pyplot as plt
import sys
sys.path.append('../')
from webapp import definitions

def plotting(a, b, xmax, xmin, ymax, ymin):

    xlist = range(xmin, xmax+1)

    ylist = []
    for i in xlist:
        ylist.append(a * i + b)

    eq = str(a) + "x+" + str(b)

    fig = plt.figure()
    plt.clf()

    plt.plot(xlist, ylist)
    plt.grid()
    plt.title(eq,{'fontsize':25})
    plt.xlabel("X", {'fontsize':15})
    plt.ylabel("Y", {'fontsize':15})
    plt.xlim(xmin, xmax)
    plt.ylim(ymin, ymax)

    plt.savefig("./linearfunction/static/linearfunction/linearfunction.png")

def index(request):
    params = definitions.readjson()

    initial_val = {
        'a':1,
        'b':0,
        'xmin':-10,
        'xmax':10,
        'ymin':-10,
        "ymax":10,
    }

    params['forms']= LFForm(request.POST or None, initial=initial_val)

    plotting(initial_val['a'], initial_val['b'], initial_val['xmax'], initial_val['xmin'], initial_val['ymax'], initial_val['ymin'])

    if (request.method == 'POST'):
        a = int(request.POST['a'])
        b = int(request.POST['b'])
        xmax = int(request.POST['xmax'])
        xmin = int(request.POST['xmin'])
        ymax = int(request.POST['ymax'])
        ymin = int(request.POST['ymin'])

        params['forms'] = LFForm(request.POST)

        plotting(a, b, xmax, xmin, ymax, ymin)

    return render(request, 'linearfunction/index.html', params)

まず重要なのがインポートです。

matplotlibをインポートするのですが、いつものように「from matplotlib import pyplot as plt」だけでは正常に動きません。

実際試してみると「python luncher」が起動してしまいます。

そこでバックグラウンドで起動させるコマンドを追加してやります。

import matplotlib
matplotlib.use('Agg')
from matplotlib import pyplot as plt

このように「import matplotlib」をした後に「matplotlib.use(‘Agg’)」とすることで、matplotlibはバックグラウンドで実行されるようになります。

その後、「from matplotlib import pyplot as plt」でpyplotをインポートします。

ちなみにこの順番をこんなふうに変えてしまうと、動かないので注意してください。

import matplotlib
from matplotlib import pyplot as plt
matplotlib.use('Agg')

一次関数の計算

次に一次関数の計算をするプログラム部分を作成していきます。

今回はplottingという関数を作成し、そこで計算をして、グラフにしています。

def plotting(a, b, xmax, xmin, ymax, ymin):

    xlist = range(xmin, xmax+1)

    ylist = []
    for i in xlist:
        ylist.append(a * i + b)

    eq = str(a) + "x+" + str(b)

    fig = plt.figure()
    plt.clf()

    plt.plot(xlist, ylist)
    plt.grid()
    plt.title(eq,{'fontsize':25})
    plt.xlabel("X", {'fontsize':15})
    plt.ylabel("Y", {'fontsize':15})
    plt.xlim(xmin, xmax)
    plt.ylim(ymin, ymax)

    plt.savefig("./linearfunction/static/linearfunction/linearfunction.png")

まずは計算部分から解説していきましょう。

def plotting(a, b, xmax, xmin, ymax, ymin):

    xlist = range(xmin, xmax+1)

    ylist = []
    for i in xlist:
        ylist.append(a * i + b)

    eq = str(a) + "x+" + str(b)

今回、取得した値は「a」、「b」、「xmax」、「xmin」、「ymax」、「ymin」の６つです。

それらを最初の「def plotting(a, b, xmax, xmin, ymax, ymin):」で指定するように定義しています。

そして「xlist = range(xmin, xmax+1)」でxの値のリスト（xlist）を作成し、そのxのリストから一つずつ値を取り出し（for i in xlist:）、 \(ax+b\) を計算したのち、yの値のリスト（ylist）に格納しています（ylist.append(a * i + b)）。

最後の「eq = str(a) + “x+” + str(b)」は式を表示するために文字列としての式を変数eqに格納しています。

グラフの作成と保存

xとyの値のリストができたら、グラフを作成し、図として保存します。

    fig = plt.figure()
    plt.clf()

    plt.plot(xlist, ylist)
    plt.grid()
    plt.title(eq,{'fontsize':25})
    plt.xlabel("X", {'fontsize':15})
    plt.ylabel("Y", {'fontsize':15})
    plt.xlim(xmin, xmax)
    plt.ylim(ymin, ymax)

    plt.savefig("./linearfunction/static/linearfunction/linearfunction.png")

今回グラフを作成するにあたって、特殊なことはしていませんので、matplotlibの使い方に関しては過去の記事を参考にしてもらえると助かります。

あわせて読みたい

【matplotlib】折れ線グラフ、マジックコマンド、表示範囲の制限［Python］グラフ描写ライブラリmatplotlibとは？これまで文字や数字をどうやって扱うかを解説してきました。そろそろ文字や数字だけの出力は飽きてきたのではないでしょうか？ …

最後の「plt.savefig(“./linearfunction/static/linearfunction/linearfunction.png”)」がグラフを保存するコマンドです。

ここで「./linearfunction/static/linearfunction/」ということでlinearfunctionフォルダの下に「/static/linearfunction」というフォルダ構造でフォルダを追加することをお忘れなく。

webapp
├── bmiapp
│   └── ...
├── db.sqlite3
├── index.cgi
├── linearfunction
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── templates
│   │   └── linearfunction
│   │       └── index.html
│   ├── static                      <- 新規作成
│   │   └── linearfunction          <- 新規作成
│   │       └── linearfunction.png  <- matplotlibにより作成されるグラフのファイル
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── forms.py
│   └── views.py
├── manage.py
├── static
│   ├── 3pysci_logo.png
│   └── favicon.png
└── webapp
    ├── __init__.py
    ├── asgi.py
    ├── definitions.py
    ├── params.json
    ├── settings.py
    ├── urls.py
    └── wsgi.py

/webapp/linearfunction/templates/linearfunction/index.html

次にindex.htmlにグラフを表示するためのコマンドを追加していきます。

と言っても特殊なコマンドではなく、matplotlibで作成されたグラフの画像ファイルを表示するだけなので、前に解説したように画像を表示するコマンドを追加するだけです。

あわせて読みたい

【Django】静的ファイル（staticファイル）で画像ファイルを表示（各アプリケーション用）［Python］ Django 前回、Bootstrapを用いて作成してきたWebページをサーバー上のBMI計算アプリと統合しました。今回は画像ファイルを配置することで、さらに最終形態へと近づけて…

ということでメインの部分に「<img src=”{% static ‘画像ファイル’ %}”>」を追加します。

        <!-- main -->
        <div class="col-sm-9" style="text-align: center; margin:2rem 0rem 2rem 0rem;">
            <form action="{% url 'index' %}" method="post">
                {% csrf_token %}
                <table style="margin-left:auto; margin-right:auto;">
                <tr><td style="text-align: right;">{{ forms.a.label}}:</td><td>{{ forms.a }}</td><td style="text-align: right;">{{ forms.b.label }}:</td><td>{{ forms.b }}</td></tr>
                <tr><td style="text-align: right;">{{ forms.xmax.label }}:</td><td>{{ forms.xmax }}</td><td style="text-align: right;">{{ forms.xmin.label }}:</td><td>{{ forms.xmin }}</td></tr>
                <tr><td style="text-align: right;">{{ forms.ymax.label }}:</td><td>{{ forms.ymax }}</td><td style="text-align: right;">{{ forms.ymin.label }}:</td><td>{{ forms.ymin }}</td></tr>
                <tr><td></td><td></td><td></td><td style="text-align: right;"><input type='submit' value="click"></td></tr>
                </table>
            </form>
            <img src="{% static 'linearfunction/linearfunction.png' %}">
        </div>
        <!-- /main -->

これでサーバーを起動し、グラフが表示されたか確認してみましょう。