Pythonのデータ可視化ツールである「Dash」を活用して、株価を時系列に表示するWebアプリケーションを作成します。
コールバックを導入しますが、前回の記事を前提として進めますので、まだ読んでいない方はこちらからお願いします。
完成品(株価を時系列に表示するアプリ)
- 株価を時系列に表示するダッシュボードを作成します
- 株式シンボルと期間を選択するとグラフが表示されます
- 株式シンボルをクリックする事で非表示・表示を切り替えられます
Dashのコールバック機能とは？
コールバック機能を使う事で、「入力」と「出力」を繋ぎ合わせた「対話的」なアプリケーションを作成する事が出来ます。
今回は、テキストボックスに「入力」すると、グラフタイトル（「出力」）がリアルタイムで変更する以下の様なプログラムを書いていきます。
Dashにコールバック関数を導入する
それでは、早速以下のコードをJupyter Notebookで実行してみましょう。
# 必要なモジュールのインポート
import dash
import dash_core_components as dcc
import dash_html_components as html
# Dashアプリケーションを作成
app = dash.Dash()
# ヘッダー、ボックス、グラフを含むページを作成
app.layout = html.Div([
html.H1('Stock Ticker Dashboard'),
html.H3('Enter a stock symbol:'),
dcc.Input(id ='my_ticker_symbol'
,value='GAP' # 初期値を設定
),
dcc.Graph(id='my_graph',
figure={
'data': [
{'x': [1,2], 'y': [3,1]}
]
}
)
])
# コールバック関数に必要なライブラリ
from dash.dependencies import Input, Output
# コールバック関数の追加
@app.callback(
Output('my_graph', 'figure'),
[Input('my_ticker_symbol', 'value')])
def update_graph(stock_ticker):
fig = {
'data': [
{'x': [1,2], 'y': [3,1]}
],
'layout': {'title':stock_ticker}
}
return fig
# サーバーを起動
if __name__ == '__main__':
app.run_server()
実行結果
テキストボックスを入力すると、グラフのタイトルがリアルタイムで変更されます。
「Apple」や「Facebook」、「Google」をテキストボックスに入力すると、リアルタイムでグラフタイトルが変更しています
解説
それでは、コールバックの導入について解説していきます。
必要なモジュールのインポート
# コールバック導入に必要なライブラリ from dash.dependencies import Input, Output
まずは、必要なライブラリをインポートしています。
dash.dependenciesのInputとOutputを導入しています。
コールバックの定義
# コールバック関数の追加
@app.callback(
Output('my_graph', 'figure'),
[Input('my_ticker_symbol', 'value')])
def update_graph(stock_ticker):
fig = {
'data': [
{'x': [1,2], 'y': [3,1]}
],
'layout': {'title':stock_ticker}
}
return fig
次に、コールバック関数を定義します。ここでは、以下の様な処理が行われています。
- Dashアプリケーションの「インプット」と「アウトプット」は、@app.callback デコレーターで明示的に示されます
- インプットは、IDが ‘my_ticker_symbol’の‘value’プロパティになり、アウトプットは、IDが‘my_graph’の‘figure’プロパティになります、
- Dashは、インプットのプロパティ（ ‘my_ticker_symbol’の‘value’）が変更されると、@app.callback で囲まれた関数が自動で呼び出され、アウトプットで指定されたプロパティ（‘my_graph’の‘figure’）をアップデートします。
- つまり、インプットが変更されると、update_graph関数が実行され、アウトプットにfigを返します。
component_idとcomponent_propertyがカギ
@app.callback(
Output(component_id='my_graph',component_property= 'figure'),
[Input(component_id='my_ticker_symbol',component_property= 'value')])
)
InputとOutputのcomponent_idとcomponent_propertyがカギです。
省略して書く事も出来ますが、明示的に上記の様に書くことも出来ます。
コールバック関数の定義(update_graph)
def update_graph(stock_ticker):
fig = {
'data': [
{'x': [1,2], 'y': [3,1]}
],
'layout': {'title':stock_ticker}
}
return fig
def update_graph(stock_ticker)でstock_tickerを受け取り、figを返す関数を定義しています。
stock_tickerは別の変数名でもOKです。
Inputで定義された値がstock_tickerに渡され、‘layout’: {‘title’:stock_ticker}の箇所で、Inputが変更される都度タイトルが変更されるわけです。
次は、「pandas-datareader」を利用して株価を取得します。
