Help us understand the problem. What is going on with this article?

【python】銘柄を検索してヒットする銘柄の株価をグラフ表示させる簡単実装

More than 1 year has passed since last update.

はじめに

先月のはじめぐらいから、株価のアプリを自分で作りたいなぁ。。。とモヤモヤしていました。
ですので、作りました。アプリというには簡素な作りですので、もうちょっと肉付けする必要はありますが、まぁまともには動きます。
ただし銘柄がニューヨーク株式市場(NYSE)に上場する外国株11銘柄のみなので日本株対応させたいところ。
->データ取得方法のpandas_datareaderの仕様上。対応します。

実物

銘柄検索フォームがあります。
search.png

銘柄がヒットする場合、グラフを描画します。ちなみにソニーの株価です。
graph.png

ソースコード

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output
import pandas_datareader.data as web
import datetime

app = dash.Dash()

app.layout = html.Div(children=[
    html.Div(children='''
        銘柄入力:
    '''),

    dcc.Input(id='input', value='', type='text'),
    html.Div(id='output-graph')
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')]
    )
def update_graph(input_data):
    start = datetime.datetime(2017,1,1)
    end = datetime.datetime.now()
    df = web.DataReader(input_data, 'iex', start, end)

    return dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': df.index, 'y': df.close, 'type': 'line', 'name': input_data},
            ],
            'layout': {
                'title': input_data
            }
        }
    )

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080)

データの取得方法

データはpandas_datareaderにて取得できます。
使用方法の詳細は以下サイト様に準拠したので、そちらご参照ください。
ソースコード上の以下の部分に相当。

import pandas_datareader.data as web
###省略###
df = web.DataReader(input_data, 'iex', start, end)

処理の流れ

  • メイン関数実行 #-> if _ name _ == '_ main _':
  • レイアウト描画 #-> app.layout
  • 入力値に対するコールバック関数起動 #-> @app.callback
  • 返り値でレイアウトが再描画 #-> Output(component_id='output-graph',

詳細の仕様については下記サイトに実例付きで紹介されているので、そちらをご覧ください。

ライブラリ

Dashを使用。
Webベースのグラフ描画ライブラリで、Reactなどjs系が中で動いているらしい。
その中でも、

  • dash_html_components
  • dash_core_components
  • Input,Output

を使用。html_componentはHTMLのタグで描画できる部分、core_componentはcontrollやgraphなどより高度な描画部分、Input,Outputは入力値処理の部分を担っている。

感想

ソースが短いわりに動いてよかった。
今度は移動平均線などの主要曲線を共に描画したい。
もしくは、Bokehなどを使用して、時系列的に描写したい。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away