作成日 : 2021-06-03
更新日 : 2021-11-03
20 min readPythonTkinter

Tkinterで使われるFigureCanvasTkAggとは?わかりやすく解説

今回はTkinterで使われるFigureCanvasTkAggに関して、わかりやすく解説いたしました。Matplotlibを用いて作成したグラフを表示したい、FigureCanvasTkAggに関して詳しく知りたい方へおすすめです。

そもそもTkinterで使われるFigureCanvasTkAggとは?

Tkinterで使われるFigureCanvasTkAggとは、Matplotlibライブラリを使って作成したグラフを、Tkinter内で表示するために利用するものを意味します。

具体的なイメージとしては、以下の画像の紫色枠で囲まれる箇所を表示するために、FigureCanvasTkAggを利用します。

Matplotlibライブラリを使った、グラフの作成方法に関しては、公式サイトでまとめられていますので、是非ご確認ください。

【5ステップ】Matplotlibライブラリを使って作成したグラフを、Tkinter内で表示する

Matplotlibライブラリを使って作成したグラフを、Tkinter内で表示するには、

1. Matplotlibライブラリを利用して、グラフを作成
2. Windowを作成
3. FigureCanvasTkAggを宣言
4. Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする
5. 手順4で作成したWidgetを表示する

の5ステップが必要になります。順に見ていきましょう。

Matplotlibライブラリを利用して、グラフを作成

始めにMatplotlibライブラリを利用して、グラフを作成を行います。

1from matplotlib.figure import Figure
2import numpy as np
3
4# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
5if __name__ == "__main__":
6    ################################################
7    # 1. Matplotlibライブラリを利用して、グラフを作成
8    # 400px x 400pxのグラフを作成する。
9    # 参考 : https://analytics-note.xyz/programming/matplotlib-figsize-dpi/
10    fig = Figure(figsize=(4, 4), dpi=100)
11    # 1行目1列の1番目へグラフを挿入する。
12    # 参考 : https://qiita.com/kenichiro_nishioka/items/8e307e164a4e0a279734#figadd_subplot
13    ax = fig.add_subplot(111)
14    # x軸の値の範囲を設定。
15    ax.set_xlim(-1.2, 1.2)
16    # y軸の値の範囲を設定。
17    ax.set_ylim(-1.2, 1.2)
18    # 0(0)~6.28(2π)までのリストを取得する。sin, cosの値を取得する。
19    # 参考 : https://note.nkmk.me/python-numpy-arange-linspace/
20    t = np.arange(0.0, 6.29, 0.01)
21    x = np.cos(1 * t)
22    y = np.sin(1 * t)
23    # (x座標, y座標)のリスト値を元に、プロットする。
24    # プロットとは? : 点をうつこと。
25    # 色の設定。
26    ax.plot(x, y, 'purple')
27    ################################################

Windowを作成

Windowの作成には、tk.Tk()を利用します。「Matplotlibライブラリを利用して、グラフを作成」で紹介したコードに加えて、以下のように記述ください。

1  from matplotlib.figure import Figure
2  import numpy as np
3+ import tkinter as tk
4
5+ class Application(tk.Frame):
6+    def __init__(self, master=None):
7+        # Windowの初期設定を行う。
8+        super().__init__(master)
9
10if __name__ == "__main__":
11     ...
12     ax.plot(x, y, 'purple')
13
14+    # 2. Windowを作成
15+    # Windowを作成する。
16+    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
17+    root = tk.Tk()
18+    app = Application(master=root)
19
20+    # Windowをループさせて、継続的にWindow表示させる。
21+    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
22+    app.mainloop()

Windowに関しては、Tkinterで使われるWindowって?どのように活用するのか徹底解説!?で総括していますので、詳しく知りたい方は是非ご確認ください。

FigureCanvasTkAggを宣言

FigureCanvasTkAggを宣言します。FigureCanvasTkAggはMatplotlibライブラリを使って作成したグラフを、Tkinter内で表示するために必要です。

「Windowを作成」で紹介したコード内のsuper().__init__(master)の下へ、以下のコードを貼り付けてください。

1  from matplotlib.figure import Figure
2  import numpy as np
3  import tkinter as tk
4+ from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
5
6    def __init__(self, master=None):
7        # Windowの初期設定を行う。
8        super().__init__(master)
9+       # 3. FigureCanvasTkAggを宣言
10+       self.canvas = FigureCanvasTkAgg(fig)

Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする

Matplotlibライブラリを利用して作成したグラフを、Tkinterでそのまま利用できません。一度グラフそのものを、TkinterのWidgetへ変換することで、利用可能になります。

「FigureCanvasTkAggを宣言」で紹介したコード内のself.canvas = FigureCanvasTkAgg(fig)の下へ、以下のコードを貼り付けてください。

1    def __init__(self, master=None):
2        # Windowの初期設定を行う。
3        super().__init__(master)
4        self.canvas = FigureCanvasTkAgg(fig)
5+       # 4. Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする。
6+       # Widgetについて : https://kuroro.blog/python/3IA9Mk6O9oBAniXsvSWU/
7+       tmp = self.canvas.get_tk_widget()

Widgetに関しては、Tkinterで使われるWidgetの一覧をまとめてみました!?で総括していますので、詳しく知りたい方は是非ご確認ください。

手順4で作成したWidgetを表示する

最後に手順4で作成したWidgetを表示します。

「Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする」で紹介したコード内のtmp = self.canvas.get_tk_widget()の下へ、以下のコードを貼り付けてください。

1    def __init__(self, master=None):
2        ...
3        tmp = self.canvas.get_tk_widget()
4
5+       # 5. 手順4で作成したWidgetを表示する
6+       # Matplotlibライブラリを利用して作成したグラフを、どのように表示するのか?
7+       # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
8+       tmp.pack()

packに関しては、【完全版!?】Tkinterを用いてpackの使い方や実例をわかりやすく解説!?で総括していますので、詳しく知りたい方は是非ご確認ください。

実際に紹介したコードを、組み合わせて実行すると、以下の画像ように表示されます。

完成コード

1from matplotlib.figure import Figure
2import numpy as np
3import tkinter as tk
4from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
5
6class Application(tk.Frame):
7    def __init__(self, master=None):
8        # Windowの初期設定を行う。
9        super().__init__(master)
10        # 3. FigureCanvasTkAggを宣言
11        self.canvas = FigureCanvasTkAgg(fig)
12        # 4. Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする。
13        # Widgetについて : https://kuroro.blog/python/3IA9Mk6O9oBAniXsvSWU/
14        tmp = self.canvas.get_tk_widget()
15
16        # 5. 手順4で作成したWidgetを表示する
17        # Matplotlibライブラリを利用して作成したグラフを、どのように表示するのか?
18        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
19        tmp.pack()
20
21# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
22if __name__ == "__main__":
23    ################################################
24    # 1. Matplotlibライブラリを利用して、グラフを作成
25    # 400px x 400pxのグラフを作成する。
26    # 参考 : https://analytics-note.xyz/programming/matplotlib-figsize-dpi/
27    fig = Figure(figsize=(4, 4), dpi=100)
28    # 1行目1列の1番目へグラフを挿入する。
29    # 参考 : https://qiita.com/kenichiro_nishioka/items/8e307e164a4e0a279734#figadd_subplot
30    ax = fig.add_subplot(111)
31    # x軸の値の範囲を設定。
32    ax.set_xlim(-1.2, 1.2)
33    # y軸の値の範囲を設定。
34    ax.set_ylim(-1.2, 1.2)
35    # 0(0)~6.28(2π)までのリストを取得する。sin, cosの値を取得する。
36    # 参考 : https://note.nkmk.me/python-numpy-arange-linspace/
37    t = np.arange(0.0, 6.29, 0.01)
38    x = np.cos(1 * t)
39    y = np.sin(1 * t)
40    # (x座標, y座標)のリスト値を元に、プロットする。
41    # プロットとは? : 点をうつこと。
42    # 色の設定。
43    ax.plot(x, y, 'purple')
44    ################################################
45
46    # 2. Windowを作成
47    # Windowを作成する。
48    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
49    root = tk.Tk()
50    app = Application(master=root)
51
52    # Windowをループさせて、継続的にWindow表示させる。
53    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
54    app.mainloop()

Tkinterのscale Widgetを活用して、動的なグラフを作成する

最後にTkinterのscale Widgetを活用して、動的なグラフ(リサジュー図形)を作成する方法をご紹介いたします。

それぞれコードと実行結果の動画をまとめておきますので、ご利用ください。

1import tkinter as tk
2from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
3from matplotlib.figure import Figure
4import numpy as np
5
6class Application(tk.Frame):
7    def __init__(self, master=None):
8        # Windowの初期設定を行う。
9        super().__init__(master)
10
11        # Windowを親要素として、frame Widget(Frame)を作成する。
12        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
13        canvasFrame = tk.Frame(self.master)
14        # Windowを親要素として、frame Widget(Frame)をどのように配置するのか?
15        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
16        canvasFrame.pack(side=tk.LEFT)
17
18        # Windowを親要素として、frame Widget(Frame)を作成する。
19        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
20        controlFrame = tk.Frame(self.master)
21        # Windowを親要素として、frame Widget(Frame)をどのように配置するのか?
22        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
23        controlFrame.pack(side=tk.RIGHT)
24
25        # frame Widget(Frame)を親要素として、FigureCanvasTkAggを宣言する。
26        self.canvas = FigureCanvasTkAgg(fig, canvasFrame)
27        # Matplotlibライブラリを利用して作成したグラフを、TkinterのWidgetとする。
28        # Widgetについて : https://kuroro.blog/python/3IA9Mk6O9oBAniXsvSWU/
29        tmp = self.canvas.get_tk_widget()
30        # frame Widget(Frame)を親要素として、Matplotlibライブラリを利用して作成したグラフを、どのように表示するのか?
31        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
32        tmp.pack(side=tk.TOP, fill=tk.BOTH, expand=True)
33
34        # frame Widget(Frame)を親要素として、scale Widgetを作成する。
35        # from_ : scale Widgetの値に下限を設定。
36        # to : scale Widgetの値に上限を設定。
37        # resolution : scale Widgetの値更新の大きさを設定。
38        # orient : scale Widgetの表示方向を設定。水平方向。
39        # command : scale Widgetの値が変更された場合に、実行する関数を設定。self.draw_plotとする。
40        # Scaleについて : https://kuroro.blog/python/DUvG7YaE2i6jLwCxdPXJ/
41        self.x_scale = tk.Scale(controlFrame, from_=1.0, to=10.0, resolution=0.01, orient=tk.HORIZONTAL, command=self.draw_plot)
42        # frame Widget(Frame)を親要素として、scale Widgetをどのように配置するのか?
43        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
44        self.x_scale.pack(anchor=tk.NW)
45
46        # frame Widget(Frame)を親要素として、scale Widgetを作成する。
47        # from_ : scale Widgetの値に下限を設定。
48        # to : scale Widgetの値に上限を設定。
49        # resolution : scale Widgetの値更新の大きさを設定。
50        # orient : scale Widgetの表示方向を設定。水平方向。
51        # command : scale Widgetの値が変更された場合に、実行する関数を設定。self.draw_plotとする。
52        # Scaleについて : https://kuroro.blog/python/DUvG7YaE2i6jLwCxdPXJ/
53        self.y_scale = tk.Scale(controlFrame, from_=1.0, to=10.0, resolution=0.01, orient=tk.HORIZONTAL, command=self.draw_plot)
54        # frame Widget(Frame)を親要素として、scale Widgetをどのように配置するのか?
55        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
56        self.y_scale.pack(anchor=tk.NW)
57
58        self.draw_plot()
59
60    # Matplotlibライブラリで作成したグラフをTkinter内で描画する。
61    # リサジュー図形について : https://kagakunojikan.net/math/lissajous_figure_and_irrational_number/
62    def draw_plot(self, event=None):
63        # scale Widgetの値を取得する。
64        v = self.x_scale.get()
65        # scale Widgetの値を取得する。
66        w = self.y_scale.get()
67        # 0(0)~6.28(2π)までのリストを取得する。sin, cosの値を取得する。
68        # 参考 : https://note.nkmk.me/python-numpy-arange-linspace/
69        t = np.arange(0.0, 6.29, 0.01)
70        x = np.cos(v * t)
71        y = np.sin(w * t)
72        # x座標の値リストを設定。
73        h.set_xdata(x)
74        # y座標の値リストを設定。
75        h.set_ydata(y)
76
77        # グラフを描画する。
78        self.canvas.draw()
79
80# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
81if __name__ == "__main__":
82    ################################################
83    # <Matplotlibの初期設定>
84    # 400px x 400pxのグラフを作成する。
85    # 参考 : https://analytics-note.xyz/programming/matplotlib-figsize-dpi/
86    fig = Figure(figsize=(4, 4), dpi=100)
87    # 1行目1列の1番目へグラフを挿入する。
88    # 参考 : https://qiita.com/kenichiro_nishioka/items/8e307e164a4e0a279734#figadd_subplot
89    ax = fig.add_subplot(111)
90    # x軸の値の範囲を設定。
91    ax.set_xlim(-1.2, 1.2)
92    # y軸の値の範囲を設定。
93    ax.set_ylim(-1.2, 1.2)
94    # (x座標, y座標)のリスト値を元に、プロットする。
95    # プロットとは? : 点をうつこと。
96    # 色の設定。
97    h, = ax.plot([],[], 'purple')
98    ################################################
99
100    # Windowを作成する。
101    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
102    root = tk.Tk()
103    app = Application(master=root)
104
105    # Windowをループさせて、継続的にWindow表示させる。
106    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
107    app.mainloop()

まとめ

• Tkinterで使われるFigureCanvasTkAggとは、Matplotlibライブラリを使って作成したグラフを、Tkinter内で表示するために利用する。

参考文献

• TkinterのFigureCanvasTkAggに関するサンプルコード
• Matplotlibの公式サイト
• リサジュー図形について