tkinter(pySimpleGUI）でmatplotlibなしでグラフを書く方法

みんなのPython勉強会＃50 (https://startpython.connpass.com/event/124255/)でLTをした内容です。

参考資料：
https://qiita.com/dario_okazaki/items/656de21cab5c81cabe59
https://pysimplegui.readthedocs.io/en/latest/cookbook/#graphing-with-graph-element
https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_Bar_Chart.py

Transcript

1. Tkinter(pySimpleGUI)でmatplotlibなし
   でグラフを書く⽅法
   2019/09/10 オカザキ
   

   View Slide

2. ⾃⼰紹介
   • オカザキ
   • 職業︓プログラマー
   • http://twitter.com/dario_okazaki
   • PyconJP2017 トーク「Kivyによるアプリケーション開発のすすめ」
   • ⻑野Python会 with NSEG（2018/7/28）「PythonのGUI@2018」
   

   View Slide

3. 今⽇の内容のきっかけ
   Tkinterでグラフを書きたいけどmatplotlibを⼊れたくない
   

   View Slide

4. 今⽇の内容のきっかけ
   Tkinterのcanvasで書けば⼀応できる
   ・書くのがめんどい
   

   View Slide

5. PySympleGUI
   • PySympleGUI
   • https://pysimplegui.readthedocs.io/en/latest/
   • 2018年からプロジェクトが開始
   • https://www.reddit.com/r/Python/comments/d2ghve/a_case_for_a
   _pythonic_python_gui/
   • tkinter, Qt(⼀部), Remi, WxPythonのラッパー
   pip install pysimplegui
   or
   pip3 install pysimplegui
   

   View Slide

6. PySimPleGUIの紹介
   • Tkinterを使うのであればPySimpleGUIを使ってみたらという話
   （ https://qiita.com/dario_okazaki/items/656de21cab5c81cabe59
   ）
   

   View Slide

7. 前回のstapyのLTで話した内容
   • Twitttrでつぶやいたら公式から連絡が来た
   

   View Slide

8. PySimpleGUIでグラフを書く
   • DrawCircle
   • DrawLine
   • DrawPoint
   • DrawRectangle
   • DrawOval
   • DrawImage
   https://pysimplegui.readthedocs.io/en/latest/#graph-element
   

   View Slide

9. Stapyの５０回の参加者の数のグラフを書く
   • CommpassのAPIから取得
   • https://connpass.com/about/api/
   • Jsonから”acccept”の値をグラフにする
   

   View Slide

10. 棒グラフ
    graph.DrawRectangle(top_left=(i * BAR_SPACING + EDGE_OFFSET, graph_infos[i][1]['accepted']),
    bottom_right=(i * BAR_SPACING + EDGE_OFFSET + BAR_WIDTH, 0), fill_color='blue’)
    graph.DrawText(text=graph_infos[i][1][‘accepted’], location=(i*BAR_SPACING+EDGE_OFFSET+2,
    graph_infos[i][1]['accepted']+10))
    # 値を表⽰
    graph.DrawText(text=graph_infos[i][1]['title'], location=(i*BAR_SPACING+EDGE_OFFSET+25, -10))
    

    View Slide

11. 折れ線グラフ
    graph.DrawText(text=graph_infos[i][1]['accepted'], location=(i*BAR_SPACING+EDGE_OFFSET+2, graph_infos[i][1]['accepted']+10))
    # 値を表⽰
    graph.DrawText(text=graph_infos[i][1]['title'], location=(i*BAR_SPACING+EDGE_OFFSET+25, -10))
    if i > 0:
    graph.DrawLine(((i-1) * BAR_SPACING + EDGE_OFFSET+ BAR_WIDTH/2 , graph_infos[(i-1)][1]['accepted']) , (i * BAR_SPACING + EDGE_OFFSET+ BAR_WIDTH/2 , graph_infos[i][1]['accepted']),color='blue', width=1 )
    graph.DrawPoint((i * BAR_SPACING + EDGE_OFFSET+ BAR_WIDTH/2 ,graph_infos[i][1]['accepted']), size=3 ,color='blue',)
    # 値を表⽰
    

    View Slide

12. まとめ
    • TODO
    • グラフの種類（折れ線／棒グラフ）の切り替え
    • 累積もしたい
    • ボタンで複数のグラフを同時に表⽰する
    • 範囲指定（数字を⼊⼒）で表⽰する範囲を変える
    • マウスでドラッグして表⽰範囲を変える
    • 続き（TODO実装）はQittaに書く予定
    

    View Slide