嗨又見面了!接下來就繼續下去我們的程式互動之旅之旅.相信應該沒有人會以為我們用一個簡單的input,就交代了想要的互動功能.在這一篇當中將帶領大家,真正的體會,炫酷又好玩的Jupyter notebook互動功能.將程式介面提升到一個讓自己愛不釋手的檔次.習慣性的不賣關子,先把我們的成果與程式碼呈現給大家;然後再繼續談如何一步一步去完成它…
import yfinance as yfimport mplfinance as mpfimport ipywidgets as widgetsfrom IPython.display import display
code_input = widgets.Text(value='',placeholder='Enter stock code',description='Stock Code:',disabled=False)
submit_button = widgets.Button(description='Plot Chart',disabled=False,button_style='', # 'success', 'info', 'warning', 'danger' or ''tooltip='Click to plot chart',icon='check'
def on_submit_button_clicked(b):code = code_input.value
# Set the start and end datesstart_date = "2023-01-01"end_date = "2023-06-11"
data = yf.download(code, start=start_date, end=end_date)
my_color = mpf.make_marketcolors(up='r', down='g', edge='inherit', wick='inherit', volume='inherit')my_style = mpf.make_mpf_style(marketcolors=my_color, figcolor='(0.82, 0.83, 0.85)', gridcolor='(0.82, 0.83, 0.85)')
mpf.plot(data, type='candle', volume=True, style=my_style, title=str(code), figsize=(8, 5))
submit_button.on_click(on_submit_button_clicked)
display(code_input, submit_button)
雖然程式看起來有些長,但實際上;在我們的每篇文章當中,都是在上一篇文章的程式碼為基礎,然後堆砌上所要想了解的新功能.所以當拆解了之前文章當中提及的程式片段後,這一段新加入的程式碼,看起來就不會那麼嚇人了.但在要解說今天這段程式碼之前;必須先來談一談Jupyter notebook,所獨有的互動小部件Widgets程式功能.這是在Python開發環境當中屬於Jupyter notebook所獨有的功能.它的這幾個小部件,。讓我們的程式呈現了以往所無法想像的可能性與精彩互動.這一篇就來介紹如何使用它.然後不要貪多的,在這篇當中,僅就其中使用的兩個小部件做詳細的運用介紹.那就廢話不多說,走起.如果要使用Jupyter notebook的互動功能Interactive,以及這些小部件,我們必須先去安裝它.pip install ipywidgets 或是在Jupyter notebook的敘述行中輸入。!pip install ipywidgets 有所不同的便是，在開頭加入一個!這個同樣適用於如果你使用colab的環境.
What can they be used for?You can use widgets to build interactive GUIs for your notebooks.You can also use widgets to synchronize stateful and stateless information between Python and JavaScript.
它們可以用來做什麼?您可以使用小部件為筆記本構建交互式GUI.您還可以使用小部件在Python和JavaScript之間,同步有狀態和無狀態的信息.
這是官方針對小部件的功能所做的定義與解說.一般我們所常會使用到的小部件,應該都會在這一篇跟下一篇當中介紹.但如果您對所有的小部件的每一個成員有興趣;可以到這個頁面裡,好好看一下它們的家族列表介紹.
Widget List — Jupyter Widgets 8.0.5 documentation (ipywidgets.readthedocs.io)
首先習慣在引入並使用它之前,一般會做這樣的兩行宣告.import ipywidgets as widgetsfrom IPython.display import display現在我們開始來學習如何使用它;首先介紹的是,用來取代之前input的文字輸入Text小部件。以下這個範例。讓我們了解如何出初步設定它。以及呼叫使用。
import ipywidgets as widgetsfrom IPython.display import display
Mess = widgets.Text(value='Hello World',placeholder='Type something',description='String:',disabled=False)display(Mess)print(Mess.value)
這是大家第一個接觸的小物件,容我再一次引述並對它做註解.別擔心;這些特性都是常用的.並且幾乎都適用在其他的小物件上.看著看著,自然就心領神會了.import ipywidgets as widgetsfrom IPython.display import display這兩行之前剛剛提起過,我們最主要使用的模組便是這個ipywidgets.第二行要引入這個模組,最主要的功能依照字義上就是為了顯示它;類似繪圖的show().Mess = widgets.Text(在這裡,對這個小物件命名為Mess;它實際上就是這個模組當中的文字欄位設定,在之後的括弧裡面被填入.value='Hello World',在文字欄位中顯示的文字。將會存放在value這個關鍵變數(keys)當中。placeholder='Type something',這個預設的字串內容,將顯示在欄位為空白的時候.description='String:',設定描述欄位的樣式,是一種字串的形式.disabled=False預設是否關閉?)display(Mess)print(Mess.value)類似畫圖的show().我裡使用display.呼叫小物件顯示並開始工作.在最後一行當中,用print做輸出.如果一切正常,螢幕上應該會顯示出我們輸入在文字欄位當中的內容.然後可以輸入以下的程式碼來查看,我們現在這個Text文字欄位的物件當中有多少個可以設定的關鍵變數keys?結果將以數列List的方式呈現.Mess.keys
['_dom_classes','_model_module','_model_module_version','_model_name','_view_count','_view_module','_view_module_version','_view_name','continuous_update','description','description_tooltip','disabled','layout','placeholder','style','value']
所以現在了解到了,當使用這個文字欄位小部件的時候,在上頭輸入了股票代碼;最終可以在value上面獲得到輸入的結果.那麼現在輸入的方式解決了,我們還需要一個按鈕,來使用輸入的股票代碼,以及啟動之後的繪製K線的程序.所以再來介紹今天的第2個小部件;那就是按鈕Button.同樣的,先來看這個範例..button = widgets.Button(description='Click me',disabled=False,button_style='', # 'success', 'info', 'warning', 'danger' or ''tooltip='Click me',icon='check')Button
我說的沒錯吧?這些小部件的特性設定,很多都是共用的.所以別擔心需要記一大堆的名詞.現在針對比較特殊的兩行,來做個解釋。第一個就是。button_style='', # 'success', 'info', 'warning', 'danger' or '' 按照字義。這裡就是在設定按鈕的一些風格.在按鈕的風格上面。一共提供了。5種的設定.其實這裡面設定值的不同,只會改變的是按鈕的顏色.比如我們選擇的，是以空白略過,它對應的是內定的風格.這是顯示一個白底的按鈕.而如果選擇的是警告的warning;或是危險的danger.按鈕將會改變底色,呈現黃色或是紅色.主要的也是為了呈現這個按鈕訊息的重要性吧! tooltip='Click me', 這個tooltip 就是一個提示.當我們的滑鼠懸停在這個按鍵上的時候,它便會顯示這個提示.而按鍵上面的指示文字,是在description當中去設定的.最後這個icon='check' 將會在按鈕上面,顯示一個打勾的符號.當然,如果把它他忽略;那麼,這個符號便不會出現.到這裡,我們便把今天所要使用到的兩個小部件都介紹完了.接著再回到原來的這段新的程式碼上頭;我們就分段的,一步一步來解釋它吧.
import yfinance as yfimport mplfinance as mpfimport ipywidgets as widgetsfrom IPython.display import display這裡依照國際慣例,就是先宣告我們所要使用的所有套件,大家應該都很熟悉了.底下兩行新增加的我們剛才也介紹了;最主要的就是為了今天所需要使用的小部件.code_input = widgets.Text(value='',placeholder='Enter stock code',description='Stock Code:',disabled=False)接下來這一部分。是設定了我們的文字欄位小部件.這些功能剛才都已經有詳細介紹過了.submit_button = widgets.Button(description='Plot Chart',disabled=False,button_style='', # 'success', 'info', 'warning', 'danger' or ''tooltip='Click to plot chart',icon='check’緊接著這一部分,毫無意外的就是設定第2個小部件Button.比較不同的是,在接下來的這段程式裡;有一段比較重要的程式碼,便是在我們去點擊觸發的這個按鈕之後所要做的繪圖動作.要去特別注意的,就是程式如何去得到這個觸發動作?並如何順利的去開展觸發之後的所有動作.
def on_submit_button_clicked(b):code = code_input.valuestart_date = "2023-01-01"end_date = "2023-06-11"這個副程式當察覺到案件被觸發的時候,便從我們的文字文字欄位小部件中取到了輸入的文字並放入到code的這個變數當中.這個code便是我們要的股票代碼.接下來兩行,我們設定了要向Yahoo資料庫,索取資料的時間長度;資料開始的日期與截止的日期.之後接下來的程式碼,大家就應該非常的熟悉了;就是下載歷史資料,以及設定繪製出來圖形的風格;最後顯示圖表.今天這篇文章當中,我並沒有加上魔術指令%matplotlib notebook.大家可以試著看看呈現出來的風格有什麼不同?
data = yf.download(code, start=start_date, end=end_date)
my_color = mpf.make_marketcolors(up='r', down='g', edge='inherit', wick='inherit', volume='inherit')my_style = mpf.make_mpf_style(marketcolors=my_color, figcolor='(0.82, 0.83, 0.85)', gridcolor='(0.82, 0.83, 0.85)')
mpf.plot(data, type='candle', volume=True, style=my_style, title=str(code), figsize=(8, 5))最後面。display(code_input, submit_button) 這一行就是顯示出設定的兩個widgets小部件.到這裡;整個程式就完善了.這一篇也就先講到這裡,下一篇繼續豐富精彩我們的互動程式.祝福大家一切安好!
