トップページ -> 最新情報技術の実習と研究ツール -> Web サービスのプログラミング -> Dash のインストールと動作確認
サイトマップへ]

Dash のインストールと動作確認

金子邦彦研究室: データベース、人工知能(AI)、データサイエンスの融合により不可能を可能にする

ユースケース:Web でグラフや表を簡単に表示したい。そして、ユーザ側で操作ができるようにしたい。

サイト内の関連Webページ

参考Webページ


Python のインストール

前準備として Python のインストールが終わっていること。

※ 以下、Windowsでの手順で説明します。Ubuntu等でも同様の手順になります。


Dash のインストール, 動作確認

Python パッケージをインストールする

  1. Window でコマンドプロンプトを実行

  2. dash, dash-daq のインストール

    https://dash.plot.ly/installation の記述による

    ==0.39.0」, 「==0.1.0」のところは、 https://dash.plot.ly/installation で確認すること。

    Windows の場合

    pip install dash==0.39.0
    pip install dash-daq==0.1.0
    

    (以下省略)

    Ubuntu の場合

    sudo pip3 install dash==0.39.0
    sudo pip3 install dash-daq==0.1.0
    

  3. 動作確認
    1. まず、次のようなPython プログラムをhoge.pyのようなファイル名で保存
      # -*- coding: utf-8 -*-
      import dash
      import dash_core_components as dcc
      import dash_html_components as html
      
      external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
      
      app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
      
      app.layout = html.Div(children=[
          html.H1(children='Hello Dash'),
      
          html.Div(children='''
              Dash: A web application framework for Python.
          '''),
      
          dcc.Graph(
              id='example-graph',
              figure={
                  'data': [
                      {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                      {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montral'},
                  ],
                  'layout': {
                      'title': 'Dash Data Visualization'
                  }
              }
          )
      ])
      
      if __name__ == '__main__':
          app.run_server(debug=True)
      

    2. プログラムを実行

      Windows の場合、次のコマンドを実行

      python hoge.py
      

      Ubuntu の場合、次のコマンドを実行

      python3 hoge.py
      

    3. Web ブラウザで、http://localhost:8050 を開く。次のような画面が出れば、動作OK

Pandas データフレームの表示

# -*- coding: utf-8 -*-
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

L = [[1, 2, 3], [4, 1, 2]]
X = pd.DataFrame(L)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dash_table.DataTable(
        id='table',
        columns=[ {"name": i, "id": i} for i in X.columns], 
        data=X.to_dict("rows")
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Dash の中身を 定期的に更新するプログラム

注意点

プログラムのポイント

# -*- coding: utf-8 -*- import dash import dash_table import dash_core_components as dcc import dash_html_components as html import pandas as pd import time import threading external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) L = [[1, 2, 3], [4, 1, 2]] X = pd.DataFrame(L) def do_layout(): global app app.layout = html.Div(children=[ html.H1(children='Hello Dash'), html.Div(children=''' Dash: A web application framework for Python. '''), dash_table.DataTable( id='table', columns=[ {"name": i, "id": i} for i in X.columns], data=X.to_dict("rows") ) ]) import time import threading # 定期的に繰り返すスレッド def worker(): global X do_layout() print(time.gmtime()) X[0][0] = X[0][0] + 1 print(X[0][0]) # 動作試験のため、わざと 8 秒待つようにしている time.sleep(8) def mainloop(): # 5秒間隔 time_interval = 5 now = time.time() while True: t = threading.Thread(target=worker) t.start() t.join() wait_time = time_interval - ( (time.time() - now) % time_interval ) print(wait_time) time.sleep(wait_time) if __name__ == '__main__': t0 = threading.Thread(target=mainloop) t0.start() # マルチスレッドにしたい。debug は False で. (debug=True に変えたときの動作は確認していません) app.run_server(debug=False)