質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

5922閲覧

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

takoyaki10

総合スコア15

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2020/03/08 09:16

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

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

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

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

エラーメッセージ

該当のソースコード

Python

1import tkinter as tk 2from pandas import DataFrame 3import matplotlib.pyplot as plt 4from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg 5 6#グラフの元となるDataFrame 7data1 = {'Country': ['US','CA','GER','UK','FR'], 8 'GDP_Per_Capita': [45000,42000,52000,49000,47000]} 9df1 = DataFrame(data1,columns=['Country','GDP_Per_Capita']) 10 11data2 = {'Year': [1920,1930,1940,1950,1960,1970,1980,1990,2000,2010], 12 'Unemployment_Rate': [9.8,12,8,7.2,6.9,7,6.5,6.2,5.5,6.3]} 13df2 = DataFrame(data2,columns=['Year','Unemployment_Rate']) 14 15data3 = {'Interest_Rate': [5,5.5,6,5.5,5.25,6.5,7,8,7.5,8.5], 16 'Stock_Index_Price': [1500,1520,1525,1523,1515,1540,1545,1560,1555,1565]} 17df3 = DataFrame(data3,columns=['Interest_Rate','Stock_Index_Price']) 18 19#プログラム実行によりポップアップさせるWindow 20root= tk.Tk() 21root.geometry('1400x800') 22 23#root上に2つのフレームとスクロールバーを設置 24Leftframe=tk.LabelFrame(master = root,text="Input",foreground="green", width=350, height=300) 25Leftframe.grid(row=0,column=0, padx=10, pady=10, sticky='wn') 26Leftframe.propagate(False) 27 28graphcanvas = tk.Canvas(root, bg="red", width=1050, height=800) 29graphcanvas.grid(row=0, column=1, padx=10, pady=10, sticky='news') 30graphcanvas.propagate(False) 31 32scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL) 33scrollbar.grid(row=0, column=2, sticky='news') 34scrollbar.configure(command=graphcanvas.yview) 35graphcanvas.configure(yscrollcommand=scrollbar.set) 36graphcanvas.configure(scrollregion=(0,0,1400,800)) 37 38#Windowの右下に設置する3つのグラフ 39figure1 = plt.Figure(figsize=(7,4), dpi=100) 40ax1 = figure1.add_subplot(111) 41bar1 = FigureCanvasTkAgg(figure1, graphcanvas) 42bar1.get_tk_widget().grid(row=0, column=0, sticky='news') 43df1 = df1[['Country','GDP_Per_Capita']].groupby('Country').sum() 44df1.plot(kind='bar', legend=True, ax=ax1) 45ax1.set_title('Country Vs. GDP Per Capita') 46 47figure2 = plt.Figure(figsize=(7,4), dpi=100) 48ax2 = figure2.add_subplot(111) 49line2 = FigureCanvasTkAgg(figure2, graphcanvas) 50line2.get_tk_widget().grid(row=1, column=0, sticky='news') 51df2 = df2[['Year','Unemployment_Rate']].groupby('Year').sum() 52df2.plot(kind='line', legend=True, ax=ax2, color='r',marker='o', fontsize=10) 53ax2.set_title('Year Vs. Unemployment Rate') 54 55figure3 = plt.Figure(figsize=(7,4), dpi=100) 56ax3 = figure3.add_subplot(111) 57ax3.scatter(df3['Interest_Rate'],df3['Stock_Index_Price'], color = 'g') 58scatter3 = FigureCanvasTkAgg(figure3, graphcanvas) 59scatter3.get_tk_widget().grid(row=2, column=0, sticky='news') 60ax3.legend() 61ax3.set_xlabel('Interest Rate') 62ax3.set_title('Interest Rate Vs. Stock Index Price') 63 64#Windowの左上に設置するボタン 65Enterbox1 = tk.Entry(Leftframe) 66Enterbox1.grid(row=1, column=1, padx=10, pady=10, sticky='wens') 67 68Enterbox2 = tk.Entry(Leftframe) 69Enterbox2.grid(row=2, column=1, padx=10, pady=10, sticky='wens') 70 71Enterbox3 = tk.Entry(Leftframe) 72Enterbox3.grid(row=3, column=1, padx=10, pady=10, sticky='wens') 73 74#root.columnconfigure(1, weight=1) 75#root.rowconfigure(4, weight=1) 76 77root.mainloop()

試したこと

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

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

Python3.7
Spider3.3.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

問題個所と原因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で生成されたウィジェットが3つ表示されている状態です。

graphcanvasのサイズの確認。

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

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

解決策

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

python

1frame = tk.Frame(master=graphcanvas) 2frame.bind( 3 "<Configure>", 4 lambda e: graphcanvas.configure(scrollregion=graphcanvas.bbox("all"))) 5graphcanvas.create_window((0, 0), window=frame, anchor="nw") # フレームをキャンバスへ描画 6graphcanvas.configure(yscrollcommand=scrollbar.set)
  • FigureCanvasTkAgg へ渡している graphcanvas を、上で生成した frame に変更する。(3か所)

動作確認

イメージ説明

修正後コード

python

1import tkinter as tk 2from pandas import DataFrame 3import matplotlib.pyplot as plt 4from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg 5 6#グラフの元となるDataFrame 7data1 = {'Country': ['US','CA','GER','UK','FR'], 8 'GDP_Per_Capita': [45000,42000,52000,49000,47000]} 9df1 = DataFrame(data1,columns=['Country','GDP_Per_Capita']) 10 11data2 = {'Year': [1920,1930,1940,1950,1960,1970,1980,1990,2000,2010], 12 'Unemployment_Rate': [9.8,12,8,7.2,6.9,7,6.5,6.2,5.5,6.3]} 13df2 = DataFrame(data2,columns=['Year','Unemployment_Rate']) 14 15data3 = {'Interest_Rate': [5,5.5,6,5.5,5.25,6.5,7,8,7.5,8.5], 16 'Stock_Index_Price': [1500,1520,1525,1523,1515,1540,1545,1560,1555,1565]} 17df3 = DataFrame(data3,columns=['Interest_Rate','Stock_Index_Price']) 18 19#プログラム実行によりポップアップさせるWindow 20root= tk.Tk() 21root.geometry('1400x800') 22 23#root上に2つのフレームとスクロールバーを設置 24Leftframe=tk.LabelFrame(master = root,text="Input",foreground="green", width=350, height=300) 25Leftframe.grid(row=0,column=0, padx=10, pady=10, sticky='wn') 26Leftframe.propagate(False) 27 28graphcanvas = tk.Canvas(root, bg="red", width=1050, height=800) 29graphcanvas.grid(row=0, column=1, padx=10, pady=10, sticky='news') 30graphcanvas.propagate(False) 31 32scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL) 33scrollbar.grid(row=0, column=2, sticky='news') 34scrollbar.configure(command=graphcanvas.yview) 35 36frame=tk.Frame(master=graphcanvas) 37graphcanvas.create_window((0, 0), window=frame, anchor="nw") 38graphcanvas.configure(yscrollcommand=scrollbar.set) 39 40frame.bind( 41 "<Configure>", 42 lambda e: graphcanvas.configure(scrollregion=graphcanvas.bbox("all"))) 43 44#Windowの右下に設置する3つのグラフ 45figure1 = plt.Figure(figsize=(7,4), dpi=100) 46ax1 = figure1.add_subplot(111) 47bar1 = FigureCanvasTkAgg(figure1, frame) 48bar1.get_tk_widget().grid(row=0, column=0, sticky='news') 49df1 = df1[['Country','GDP_Per_Capita']].groupby('Country').sum() 50df1.plot(kind='bar', legend=True, ax=ax1) 51ax1.set_title('Country Vs. GDP Per Capita') 52 53figure2 = plt.Figure(figsize=(7,4), dpi=100) 54ax2 = figure2.add_subplot(111) 55line2 = FigureCanvasTkAgg(figure2, frame) 56line2.get_tk_widget().grid(row=1, column=0, sticky='news') 57df2 = df2[['Year','Unemployment_Rate']].groupby('Year').sum() 58df2.plot(kind='line', legend=True, ax=ax2, color='r',marker='o', fontsize=10) 59ax2.set_title('Year Vs. Unemployment Rate') 60 61figure3 = plt.Figure(figsize=(7,4), dpi=100) 62ax3 = figure3.add_subplot(111) 63ax3.scatter(df3['Interest_Rate'],df3['Stock_Index_Price'], color = 'g') 64scatter3 = FigureCanvasTkAgg(figure3, frame) 65scatter3.get_tk_widget().grid(row=2, column=0, sticky='news') 66ax3.legend() 67ax3.set_xlabel('Interest Rate') 68ax3.set_title('Interest Rate Vs. Stock Index Price') 69 70#Windowの左上に設置するボタン 71Enterbox1 = tk.Entry(Leftframe) 72Enterbox1.grid(row=1, column=1, padx=10, pady=10, sticky='wens') 73 74Enterbox2 = tk.Entry(Leftframe) 75Enterbox2.grid(row=2, column=1, padx=10, pady=10, sticky='wens') 76 77Enterbox3 = tk.Entry(Leftframe) 78Enterbox3.grid(row=3, column=1, padx=10, pady=10, sticky='wens') 79 80#root.columnconfigure(1, weight=1) 81#root.rowconfigure(4, weight=1) 82 83root.mainloop()

関連

投稿2020/03/17 12:31

teamikl

総合スコア8664

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takoyaki10

2020/03/18 05:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問