Chart.jsで家計簿のグラフ化

estoy
2020年10月7日
- Programming
- Django
- Javascript

去年10月頃、「ちょっと出費が多くなってるなー」と思っていたのですが、特に家計簿やアプリをつけておらず、どんなことにいくら使っているか正直、あまり出費をあまり管理できていない状況でした。

そこで、一か月分の明細データを仕分けして、グルーピング・グラフ化ができれば、今の出費状況が少しはわかりやすくなると考えて、Djangoでデータの仕訳を行って、Chart.jsを使った簡単な家計簿のグラフ化をすることにしました。
（家計簿アプリも色々あるので、勿論そちらの利用もおすすめです。）

【目次】

1. 家計簿アプリの概要
2. Chart.jsの部分
補足. サンプル
3. 感想

1. 家計簿アプリの概要

以下が今回作ったアプリの概要です。単純に「月次の推移」と「月の明細」だけまずは分かればよいと思ったので、「月次画面」と「月別明細画面」の2画面だけの簡単なアプリです。
データ元はクレカのサイトの明細ファイルを利用しており、「月次推移」画面からファイルをアップロードすると、勝手に明細の内容から、IDを振ってデータを仕訳して追加、グラフを表示します。
また、月次の明細を見たい場合は、明細のプルダウンから確認したい月次を選ぶと画面が遷移するという動きになっています。

バックエンドには前述のとおり、Djangoを使っており、ファイルのアップロード、データの仕訳・登録をさせていますが、実行している内容は基本的なことばかりなので、ここでは記載は省きます。データの仕訳ができたら、それをjavascriptの変数として出力することで、Chart.js側でグラフ化させるようにしています。その記述が下の通り。

2. Chart.js部分の記述

chart.jsの記述は公式サイトのサンプルを参考に記述しました。下記は、月別推移の画面の記述になりますが、単純に月ごとの内訳とその積み上げが見たかったので、グラフの種類"type"をline（折れ線）にし、y軸の"stacked"（積み上げ）をtrueにするように設定しています。
データさえ作成できてしまえば基本的には、下記のようにchart.jsのconfigをルールに則って記述するだけなので、とても簡単ですね。

(コード部分)

<script>
   //出力データの内容
    var data = {'pay': [
               {'id': '1', 'values': [,,,], 'name': '食費（コンビニ）', 'color': 'rgb(100,200,100)'},
               {'id': '2', 'values': [,,,], 'name': '食費（スーパー）', 'color': 'rgb(165,253,253)'},
               {'id': '3', 'values': [,,,], 'name': '固定費（ガス代）', 'color': 'rgb(253,198,165)'},
               {'id': '4', 'values': [,,,], 'name': '固定費（電話料金）', 'color': 'rgb(253,178,165)'},
               ・・・(中略)・・・],
    'pay_month': ['201811', '201812', '201901', ・・・(中略)・・・, '202008']}
    
    //Chart.jsの設定部分
    var ctx = document.getElementById('payment').getContext('2d');
    var config = {}
    setChartData()
    window.myLine = new Chart(ctx, config);
    window.onload = function() {
      document.getElementById('month').onchange = function(){
	var url = this.options[this.selectedIndex].value;
	if(url != ''){
	  location.href = url;
	}
      };
    };

    function setChartData(){
      config = {
       	type:'line',   //グラフの種類を線グラフに設定
	data:{
	  labels:data.pay_month,      //x軸に変数dataのpaymonth配列を指定
	  datasets:[]
	},
	options:{
	  responsive:true,
	  tooltips:{
	    mode: 'index',
	  },
	  scales: {
            //x軸の設定
	    xAxes:[ {
	      scaleLabel:{
		display:true,
		labelString:'Month',
	      }
	    }],
            //y軸の設定
	    yAxes: [{
	      stacked:true,  //グラフを積み上げグラフに設定
	      scaleLabel :{
		display: true,
		labelString:'Price'
	      }
	    }]
	  }
	}
      }
      //y軸のデータの追加
      for (var i=0 ;i < data.pay.length; i++){
        var temp = {
	  label:data.pay[i].name,
	  data:data.pay[i].values,
	  borderColor:data.pay[i].color,
	  backgroundColor:data.pay[i].color,
	}
        config.data.datasets[i] = temp
      }
    }
</script>

実際に、上記のコードの結果、画面に表示された結果が下の画面です。データを月別・仕訳の分類別に作成したことで、各分類ごとの出費の推移と、その合計の推移がグラフ化されてたことがわかります。
また、chart.jsの標準機能で、マウスオーバーするとそのデータの表示も勝手に行ってくれます。

（画像．月次推移画面）

ちなみにプルダウンを選択して、移動する明細の画面が↓の画面です。

（画像．月別明細画面）

補足．サンプル

サンプルまでに上で書いたコードを基に、chart.jsのグラフを表示してみました。データは適当に変えていますが、実際に表示すると下みたいな感じになるということで、ご参考までに。

（Chart.jsのサンプル）

3. 感想

簡単ですが家計簿アプリを作ったことで、出費の大まかな内訳と月別の推移がわかるようになりました。出費が多かったのは、やっぱり旅行とかに行ったときですね。。。後、個人的に、食費のコンビニとスーパーで買った分の合計があんまり変わっていなかったので、飯はコンビニでも、スーパーでもあんま変わらない可能性に気づきました笑

また、Chart.jsを使った感想ですが、このアプリを作った当時、フロントサイドのコーディング、特にJavascriptはほぼ初めてだったのにも関わらず、それでも少ないコードで簡単に色々なグラフを作ることができて、とても便利だと感じました。
今回使った折れ線グラフ、円グラフ以外にも、公式サイトを見ると、棒グラフや散布図など多様なグラフに対応しているので、データの可視化の入り口としてはとても有効なライブラリではないかと思います!

4. 追記（2020/12/12）

この記事では、クライアント側のグラフ部分のみを記載しましたが、その後、データの生成部分の処理についても一つ記事を書いてみました。関連する記事の「Djangoで家計簿の自動仕訳」にて、そちらを記載していますので、良かったら見てみて下さい。

Return

節約プログラマー雑記