Python Tkinter: Canvas上にスクロールバーを設置したが、動作しない

Question

Canvas上にスクロールバーを設置し、スクロールに応じてCanvasの内容を上下して表示したい

３つのコードをCanvas上に表示するようにしましたが、２つしか画面に表示できないのでスクロールバーで下のグラフも表示できるようにしたいと考えています。（今後、いくつも下にグラフを追加していく予定です）

しかし、今のコードではスクロールバーのバーは表示することができますが、実際にスクロールすることができないです。様々なサイトを参考にして解決を試みましたが、うまくいきませんでした。方法をご教示いただけませんでしょうか。よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

import tkinter as tk
from pandas import DataFrame
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

#グラフの元となるDataFrame
data1 = {'Country': ['US','CA','GER','UK','FR'],
         'GDP_Per_Capita': [45000,42000,52000,49000,47000]}
df1 = DataFrame(data1,columns=['Country','GDP_Per_Capita'])

data2 = {'Year': [1920,1930,1940,1950,1960,1970,1980,1990,2000,2010],
         'Unemployment_Rate': [9.8,12,8,7.2,6.9,7,6.5,6.2,5.5,6.3]}
df2 = DataFrame(data2,columns=['Year','Unemployment_Rate'])

data3 = {'Interest_Rate': [5,5.5,6,5.5,5.25,6.5,7,8,7.5,8.5],
         'Stock_Index_Price': [1500,1520,1525,1523,1515,1540,1545,1560,1555,1565]}
df3 = DataFrame(data3,columns=['Interest_Rate','Stock_Index_Price'])

#プログラム実行によりポップアップさせるWindow
root= tk.Tk()
root.geometry('1400x800')

#root上に２つのフレームとスクロールバーを設置
Leftframe=tk.LabelFrame(master = root,text="Input",foreground="green", width=350, height=300)
Leftframe.grid(row=0,column=0, padx=10, pady=10, sticky='wn')
Leftframe.propagate(False)

graphcanvas = tk.Canvas(root, bg="red", width=1050, height=800)
graphcanvas.grid(row=0, column=1, padx=10, pady=10, sticky='news')
graphcanvas.propagate(False)

scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL)
scrollbar.grid(row=0, column=2, sticky='news')
scrollbar.configure(command=graphcanvas.yview)
graphcanvas.configure(yscrollcommand=scrollbar.set)
graphcanvas.configure(scrollregion=(0,0,1400,800))

#Windowの右下に設置する3つのグラフ
figure1 = plt.Figure(figsize=(7,4), dpi=100)
ax1 = figure1.add_subplot(111)
bar1 = FigureCanvasTkAgg(figure1, graphcanvas)
bar1.get_tk_widget().grid(row=0, column=0, sticky='news')
df1 = df1[['Country','GDP_Per_Capita']].groupby('Country').sum()
df1.plot(kind='bar', legend=True, ax=ax1)
ax1.set_title('Country Vs. GDP Per Capita')

figure2 = plt.Figure(figsize=(7,4), dpi=100)
ax2 = figure2.add_subplot(111)
line2 = FigureCanvasTkAgg(figure2, graphcanvas)
line2.get_tk_widget().grid(row=1, column=0, sticky='news')
df2 = df2[['Year','Unemployment_Rate']].groupby('Year').sum()
df2.plot(kind='line', legend=True, ax=ax2, color='r',marker='o', fontsize=10)
ax2.set_title('Year Vs. Unemployment Rate')

figure3 = plt.Figure(figsize=(7,4), dpi=100)
ax3 = figure3.add_subplot(111)
ax3.scatter(df3['Interest_Rate'],df3['Stock_Index_Price'], color = 'g')
scatter3 = FigureCanvasTkAgg(figure3, graphcanvas)
scatter3.get_tk_widget().grid(row=2, column=0, sticky='news')
ax3.legend()
ax3.set_xlabel('Interest Rate')
ax3.set_title('Interest Rate Vs. Stock Index Price')

#Windowの左上に設置するボタン
Enterbox1 = tk.Entry(Leftframe)
Enterbox1.grid(row=1, column=1, padx=10, pady=10, sticky='wens')

Enterbox2 = tk.Entry(Leftframe)
Enterbox2.grid(row=2, column=1, padx=10, pady=10, sticky='wens')

Enterbox3 = tk.Entry(Leftframe)
Enterbox3.grid(row=3, column=1, padx=10, pady=10, sticky='wens')

#root.columnconfigure(1, weight=1)
#root.rowconfigure(4, weight=1)

root.mainloop()

試したこと

Canvasの代わりにFrameを使用してみましたが動作しませんでした。

補足情報（FW/ツールのバージョンなど）

Python3.7
Spider3.3.2

Answer 1

問題個所と原因1:

graphcanvas.configure(scrollregion=(0,0,1400,800))

Canvas のスクロール領域のサイズ(立幅) とスクロールバーの長さが同じ為、
実質スクロールが無効になっています。（スクロールして表示するものがない状態）

スクロールバーのサイズはキャンバスの縦幅と同じ長さで配置されているので、
scrollregionの height を canvas 以上にするとスクロール可能になるはずです。

問題検証用のコード

graphcanvas.configure(scrollregion=(0,0,1400,2000))

height の値をキャンバスサイズ以上にすると、スクロールバー自体は有効になります。

但し、今回のコードにおいては、別の問題(FigureCanvasTkAggの扱い)もあり
肝心のスクロールが動かしても期待通りの動作をしない状態になります。

問題の原因2

FigureCanvasTkAggは、キャンバスへ描画するのではなく、Tkのキャンバスウィジェットを返します。
現状のコードでは、何も描画されてないgraphcanvasウィジェットの上に
FigureCanvasTkAggで生成されたウィジェットが３つ表示されている状態です。

graphcanvasのサイズの確認。

print(graphcanvas.bbox("all"))  # 何も描画されていない為、Noneが出力される

スクロールバーは graphcanvas と紐づいている為、スクロールバーを動かす事は出来ても
graphcanvas 自体には何も描画されていないのでグラフはスクロールされません。

解決策

フレームの上に配置してキャンバスへ描画(create_window)することで解消します。

frame = tk.Frame(master=graphcanvas)
frame.bind(
    "<Configure>",
    lambda e: graphcanvas.configure(scrollregion=graphcanvas.bbox("all")))
graphcanvas.create_window((0, 0), window=frame, anchor="nw") # フレームをキャンバスへ描画
graphcanvas.configure(yscrollcommand=scrollbar.set)

• FigureCanvasTkAgg へ渡している graphcanvas を、上で生成した frame に変更する。(3か所)

---

動作確認

修正後コード

import tkinter as tk
from pandas import DataFrame
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

#グラフの元となるDataFrame
data1 = {'Country': ['US','CA','GER','UK','FR'],
         'GDP_Per_Capita': [45000,42000,52000,49000,47000]}
df1 = DataFrame(data1,columns=['Country','GDP_Per_Capita'])

data2 = {'Year': [1920,1930,1940,1950,1960,1970,1980,1990,2000,2010],
         'Unemployment_Rate': [9.8,12,8,7.2,6.9,7,6.5,6.2,5.5,6.3]}
df2 = DataFrame(data2,columns=['Year','Unemployment_Rate'])

data3 = {'Interest_Rate': [5,5.5,6,5.5,5.25,6.5,7,8,7.5,8.5],
         'Stock_Index_Price': [1500,1520,1525,1523,1515,1540,1545,1560,1555,1565]}
df3 = DataFrame(data3,columns=['Interest_Rate','Stock_Index_Price'])

#プログラム実行によりポップアップさせるWindow
root= tk.Tk()
root.geometry('1400x800')

#root上に２つのフレームとスクロールバーを設置
Leftframe=tk.LabelFrame(master = root,text="Input",foreground="green", width=350, height=300)
Leftframe.grid(row=0,column=0, padx=10, pady=10, sticky='wn')
Leftframe.propagate(False)

graphcanvas = tk.Canvas(root, bg="red", width=1050, height=800)
graphcanvas.grid(row=0, column=1, padx=10, pady=10, sticky='news')
graphcanvas.propagate(False)

scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL)
scrollbar.grid(row=0, column=2, sticky='news')
scrollbar.configure(command=graphcanvas.yview)

frame=tk.Frame(master=graphcanvas)
graphcanvas.create_window((0, 0), window=frame, anchor="nw")
graphcanvas.configure(yscrollcommand=scrollbar.set)

frame.bind(
    "<Configure>",
    lambda e: graphcanvas.configure(scrollregion=graphcanvas.bbox("all")))

#Windowの右下に設置する3つのグラフ
figure1 = plt.Figure(figsize=(7,4), dpi=100)
ax1 = figure1.add_subplot(111)
bar1 = FigureCanvasTkAgg(figure1, frame)
bar1.get_tk_widget().grid(row=0, column=0, sticky='news')
df1 = df1[['Country','GDP_Per_Capita']].groupby('Country').sum()
df1.plot(kind='bar', legend=True, ax=ax1)
ax1.set_title('Country Vs. GDP Per Capita')

figure2 = plt.Figure(figsize=(7,4), dpi=100)
ax2 = figure2.add_subplot(111)
line2 = FigureCanvasTkAgg(figure2, frame)
line2.get_tk_widget().grid(row=1, column=0, sticky='news')
df2 = df2[['Year','Unemployment_Rate']].groupby('Year').sum()
df2.plot(kind='line', legend=True, ax=ax2, color='r',marker='o', fontsize=10)
ax2.set_title('Year Vs. Unemployment Rate')

figure3 = plt.Figure(figsize=(7,4), dpi=100)
ax3 = figure3.add_subplot(111)
ax3.scatter(df3['Interest_Rate'],df3['Stock_Index_Price'], color = 'g')
scatter3 = FigureCanvasTkAgg(figure3, frame)
scatter3.get_tk_widget().grid(row=2, column=0, sticky='news')
ax3.legend()
ax3.set_xlabel('Interest Rate')
ax3.set_title('Interest Rate Vs. Stock Index Price')

#Windowの左上に設置するボタン
Enterbox1 = tk.Entry(Leftframe)
Enterbox1.grid(row=1, column=1, padx=10, pady=10, sticky='wens')

Enterbox2 = tk.Entry(Leftframe)
Enterbox2.grid(row=2, column=1, padx=10, pady=10, sticky='wens')

Enterbox3 = tk.Entry(Leftframe)
Enterbox3.grid(row=3, column=1, padx=10, pady=10, sticky='wens')

#root.columnconfigure(1, weight=1)
#root.rowconfigure(4, weight=1)

root.mainloop()

---

関連

• python tkinterでフレームの中でスクロール？させたい

Comments

[takoyaki10]

ご丁寧に回答していただきありがとうございました。解決いたしました。FigureCanvasTkAggが実際に何をしているのかわからないまま使っていたため、ご指摘をいただけて助かりました。ありがとうございました。