PySimpleGUIでGUIツール作成～Plotlyで月間支出グラフを出力してみよう


![Python演習スライド.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/15515b6a-eb23-0251-0565-064bc72c174c.jpeg)
Pythonを使ったグラフ表示の方法として、matplotlibやフレームワークなどを使ったことがある方もいらっしゃると思います。データを視覚化することで現状の課題に対するフィードバックがしやすくなる為、前向きにデータ活用していきたいものですよね。（小さい規模での）導入作業を繰り返し行うことで、周囲に合意を得られる形で情報が共有され、実際に導入実績につながるということもあるのかもしれません。<br>

今回は、<b>GUIツールで「取り込んだExcel（csv）ファイルを操作し、PDFファイルでグラフ表示する」方法</b>について確認していきます。ライブラリには

<b>GUI：PySimpleGUI ／ グラフ表示：Plotly ／PDF出力：kaleido</b>    を使用します。

ライブラリを用いてデータを読み書きしたり、グラフを出力したり、PDF出力するといった具合に、使用用途に合わせて組み合わせて実装していけると良いですよね。

<a href="http://semi3del.xsrv.jp/dis/PySimpleGUIPlotlyGraph.zip" target="_blank">添付資料のダウンロードはこちらから</a>　（右クリックからリンク先を保存してください）

<br>
添付資料にある「ExpenseList.csv」を基にグラフ表示してみたいと思います。
<br><br>&nbsp;ExpenseList.csv

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/f879b88b-885d-8fd7-5519-ae9db32ee845.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/7f2c55a9-d22f-d9ec-44e2-657d3cb34253.png)

<h3>PySimpleGUIの画面レイアウト作成</h3>
それではまず、PySimpleGUIライブラリを使ってGUIツールの画面レイアウトを作成していきましょう。
<br><br>
<b>問題：サンプルコードを実行して画面レイアウトを作成</b>

以下のサンプルのように（PySimpleGUIの基礎解説の参考サイトや他のWebサイトを参考にしながら）csvファイルを読み込む画面レイアウトを作成してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/25a57f35-1b05-d4fa-6010-d0b6de04132b.png)

【参考サイト】：PySimpleGUIの使い方についての基礎解説
http://www.k-techlabo.org/blog2/?page_id=1481

・インストール
pipというPythonのパッケージ管理ツールを使って、「PySimpleGUI」をインストールします。

※	Pythonインストール時に標準で入っているパッケージ以外をインストールする場合、
<b>「pip install パッケージ名」</b>のコマンドで、ローカル環境のPowerShellにてインストールをします。
```python:インストール
pip install PySimpleGUI
```
► 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/d9a2dce9-3033-179a-c44f-a5a7770e5bb8.png)

```python:サンプルコード（画面レイアウト作成）
import PySimpleGUI as sg

layout = [
   [sg.Text("ファイル"), sg.InputText(), sg.FileBrowse('ファイル選択', key="inputFilePath")],
   [sg.Text(" ↓↓PDFにてグラフを表示:")],
   [sg.Button('グラフ出力')]
]
window = sg.Window("ファイル読込", layout)

# イベントループ
while True:
    event, values = window.read()                                                                                                                       
    if event == sg.WIN_CLOSED:                                                                                                                      
        break                                                                                                                                                              
elif event == 'グラフ出力':
        # 処理の内容を記載
        sg.popup('処理内容の実装前')     

window.close()
```

<h3>Pythonでファイル読み込み処理を実装する</h3>

問題：CSVデータをpandasのデータフレームを利用して読込

先程実行したGUIのソースにpandasのデータフレームを利用して読み込み、
CSVファイルをデータ表示させて内容を確認してみましょう。
＊このとき、実行ファイルと同じディレクトリに「ExpenseList.csv」を追加すること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/208e25bb-a7cd-a4b8-757d-566af97d3eb4.png)

```python:コード
import pandas as pd
# pandasでcsvファイルの内容を読み込む
# csvファイルの、1列目にAccountDate, 2列目にExpenseItem, 3列目にMemo, 4列目にWithdrawalAmountが入っているとする
df = pd. read_csv('csvのパスを記載', encoding='SHIFT_JIS')

print(df)

```

<h3>Pandasとは？</h3>

Pythonでデータ処理をするために作られた高機能なライブラリ。代表的な使い方として<b>SeriesやDataFrameを使ったデータの処理方法</b>があります。Pandasを利用するには、以下のようにインポートを行います。Asキーワードを使用してpdで呼び出せるようにします。

```python:In
import pandas as pd

```
►使用例
```python:
# 1次元データの利用
ser = pd.Series( [10, 20, 30, 40] )
ser

# 2次元データの利用
df = pd.DataFrame( [10, “a”, True], 
[20, “b”, False],
[30, “c”, False],
[40, “d”, True] )
df
```
csvやExcelのデータを読み込んだり、列や行を削除したり、フィルターをかけて抽出をしたりといった<b>Excelやデータベース言語のSQLでできることがPandasの機能にはあります。</b>

<h3>Pythonでグラフ表示～ Plotlyライブラリの基礎</h3>

次、グラフ描画するにあたって、使用するライブラリの基礎を押さえておきましょう。

<b>・Plotly とは？</b>

　インタラクティブな可視化ができるライブラリのことで、「Plotly express」というPlotlyのラッパーを使うと、より簡潔な方法でデータを可視化することができます。

　今回は、<b>「Plotly express」を使って、折れ線グラフ、棒グラフ、円グラフを描画する例</b>をみていきます。
<br>
<b>問題　：Plotlyの基本①～折れ線グラフの書き方を理解する</b>

　ExpenseList.csvのに各月（AccountDateごと）の支出合計額の推移をPlotly expressを利用して、折れ線グラフで表示してください。

作業の際、PDF出力する為に「pip install kaleido」を実施してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/7b5870ba-cfd2-ebc8-2a64-6b84c19edb3f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/9047dcef-8fee-c91e-c33c-f64726e067c3.png)

```python:コード
import PySimpleGUI as sg
import pandas as pd
import plotly.express as px

layout = [
   [sg.Text("ファイル"), sg.InputText(key='-file-'), sg.FileBrowse('ファイル選択',
key="inputFilePath",target='-file-')],
   [sg.Text(" ↓↓ PDFにてグラフを表示:")],
   [sg.Button('グラフ出力')]
]

window = sg.Window("ファイル読込", layout)

# イベントループ
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
    elif event == 'グラフ出力':
        # ファイルパスを取得
        f = values['-file-']
        
        # pandasでcsvファイルの内容を読み込む
        # csvファイルの、1列目にAccountDate, 2列目にExpenseItem, 3列目にMemo, 
4列目にWithdrawalAmountが入っているとする
        df = pd.read_csv(f, encoding='SHIFT_JIS')
        # WithdrawalAmount列を数値変換する
        df['WithdrawalAmount'] = df['WithdrawalAmount'].apply(lambda x: x.replace(',', '')).astype('int')

        #作成したデータフレームを基にグラフを作成
        df2 = df[['AccountDate','WithdrawalAmount']].groupby('AccountDate').sum(numeric_only=True)
        print(df2)

        #折れ線グラフを作成
        fig = px.line(df2, title='AccountDateごとの支出')
        fig.show()
        #出力内容をPDFでグラフ表示（kaleidoライブラリ）
        fig.write_image("./test.pdf")


window.close()
```
<br><br>
<b>問題　：Plotlyの基本②～棒グラフの書き方を理解する</b>


前の問題のグラフ表示方法を参考にして
ExpenseList.csvの支出カテゴリごとの合計額を
Plotly expressを利用して、棒グラフで表示してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/857ac6ab-9790-1c38-a529-ed878a58079a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/c732775f-abef-a704-8815-733ac9569506.png)

<b>問題　：Plotlyの基本③～円グラフの書き方を理解する</b>

　前の問題のグラフ表示方法を参考にして
　ExpenseList.csvの支出カテゴリごとの合計費用の割合について
　Plotly expressを利用して、円グラフで表示してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/34659034-0d7a-4e2c-fdaa-1d7b1e214d95.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/64c8a7a8-b7d5-cab1-fa26-6e60e3e3a0b8.png)

業務で Python を使ってツールを作る機会がある方もいらっしゃると思います。自身の PC で Visual Studio Code を使って簡単に今回のサンプルを試すことができますので、この機会に Python に触れる時間を作っていただけると嬉しい限りです。
以上となります。