Python・Djangoで家計簿アプリ ~各口座の詳細ページ~

Masa

こんにちは！Masaです。

今回は家計簿アプリ作成の10回目をやっていきます！

この記事はこんな方におすすめ！

Django初心者で簡単なWebアプリケーション作成を考えている人
Djangoの学び直しをしている人
Djangoの基礎を身に付けたい人

前回のおさらいと今回やること
残高推移のグラフ
まとめ

前回のおさらいと今回やること

前回の記事では、各口座の詳細ページを作成しました。

Python・Djangoで家計簿アプリ開発⑨【口座詳細ページ作成（前半）】

Python・Djangoを使用して家計簿アプリを作成しています。９回目は各口座の詳細ページを作成します。初心者の方もわかりやすいように各工程詳細に書いていますのでご覧ください！

今回は、前回作成した口座の詳細ページに残高推移のグラフを表示していきます。

それでは頑張っていきましょう💪

残高推移のグラフ

残高推移のグラフ作成では、Chart.jsを使用します。

これは以前To-Doリストを作成したときに使用しました。

404 NOT FOUND | Memorandum of a Network Engineer

Chart.jsのページに様々なグラフのサンプルが載っているので、これを使いましょう。

Chart.jsの導入

最初にChart.jsを読み込みましょう。

base.htmlに追記します。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>家計簿アプリ</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Chart.jsを読み込む -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>  <!--追加-->
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">家計簿アプリ</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'index' %}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'monthly_details' %}">月別詳細</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'by_account' %}">資産詳細</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'assets' %}">資産推移</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'setup' %}">設定</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    {% block content %}{% endblock %}

    <!-- Bootstrap Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

また、以下のコードをaccount_detail.htmlの残高グラフを表示したい場所に記述します。

<canvas id="myChart" width="400" height="400"></canvas>

これで導入は完了です。
グラフの詳細を記述していきましょう。

ビューでグラフに渡す値を取得する

次にビューでグラフに渡す値を整理して取得しましょう。

グラフは線グラフとし、横軸は日付、縦軸は残高とします

views.pyのAccount_DetailViewに追記していきましょう。
※ここにきて、横軸のメモリ幅が均等にならないことに気づきました。
次回の記事で改善しますので今回はこの不自然なままでやっていきます。

class Account_DetailView(View):
    def get(self, request, num, year=int(today[0]), month=int(today[1])):
        # 選択口座のデータの取得
        account = AccountBalance.objects.get(id=num)
        # 選択講座の収支データの取得
        income = Income.objects.all().filter(account__name=account.name, date__year=year, date__month=month).order_by()
        expense = Expense.objects.all().filter(account__name=account.name, date__year=year, date__month=month).order_by()

        #グラフのデータ取得
        account_balance = AccountBalance.objects.all().filter(name=account.name) #追加

        balance = [] #追加
        date = []

        #追加
        for n in account_balance:
            date.append(n.date.strftime('%y/%m/%d'))
            balance.append(n.balance)


        # 月次切り替えの際の条件
        if month == 12:
            last_year = year
            last_month = 11
            next_year = year + 1
            next_month = 1
        elif month == 1:
            last_year = year - 1
            last_month = 12
            next_year = year
            next_month = 2
        else:
            last_year = year
            last_month = month - 1
            next_year = year
            next_month = month + 1

        params = {
            'account': account,
            'income': income,
            'expense': expense,
            'date': date,　#追加
            'balance': balance,　#追加
            'year': year,
            'month': month,
            'last_year': last_year,
            'last_month': last_month,
            'next_year': next_year,
            'next_month': next_month,
        }

        return render(request, 'money_diary/account_detail.html', params)

やっていることとしては、

AccountBalanceから選択された口座のデータを取得
空のリストに日付と残高を繰り返しで格納する

としています。

上でも記述してますが、この状態だと収支を登録した日がプロットされてしまいます。
そのため横軸が均等な日付にならないためこれは今後の記事で改善します。

テンプレートにグラフの詳細を記述する

最後にグラフの詳細をテンプレートに記述していきましょう。

先ほど記述したaccount_detail.htmlの<canvas ~の行の以下に詳細を追記しましょう。
グラフの詳細はChart.jsのサンプルを改良したものです・

<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ date |safe }},
        datasets: [{
            data: {{ balance | safe }},
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1,

            lineTension: 0
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
      }
  });
  </script>

これでグラフの形にはなったと思います。