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

前準備

Python の準備（Windows，Ubuntu 上）

• Windows での Python 3.10，関連パッケージ，Python 開発環境のインストール（winget を使用しないインストール）: 別ページ »で説明
• Ubuntu では，システム Pythonを使うことができる．Python3 開発用ファイル，pip, setuptools のインストール: 別ページ »で説明

【サイト内の関連ページ】

• Python のまとめ: 別ページ »にまとめ
• Google Colaboratory の使い方など: 別ページ »で説明

【関連する外部ページ】 Python の公式ページ: https://www.python.org/

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

Python パッケージをインストールします。

1. Windows では，コマンドプロンプトを管理者権限で起動する（例：Windowsキーを押し，「cmd」と入力し，「管理者として実行」を選択）します。

   コマンドプロンプトを管理者として実行する方法については，別ページ »で説明しています。

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

   【関連する外部ページ】 https://dash.plotly.com/

   • Windows の場合

     Windows では，コマンドプロンプトを管理者として実行し，次のコマンドを実行します。

     python -m pip install jupyter-dash pandas dash dash-daq
     

     
     （以下省略）
   • Ubuntu の場合

     sudo apt -y update
     sudo apt -y install python3-pandas
     sudo pip3 install jupyter-dash dash dash-daq
     

3. Dash の動作確認
   1. Python プログラムの作成

      Windows の場合， コマンドプロンプトで次のコマンドを実行します。

      cd /d c:%HOMEPATH%
      notepad hoge.py
      

      次の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. Python プログラムの実行

      Python プログラムの実行方法については，別ページ »で説明しています。

      Python の詳細については，別ページ »にまとめています。

      • Windows の場合

        コマンドプロンプトで次のコマンドを実行します。

        python hoge.py
        

        
      • Ubuntu の場合

        次のコマンドを実行します。

        python3 hoge.py
        

        
   3. Web ブラウザで localhost:8050 にアクセスします。次のような画面が表示されれば動作確認完了です。
      

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

注意点：

• app.run_server() では debug=False を指定する必要があります。

プログラムのポイント：

• worker 関数が定期的に実行され，X の値を更新し，do_layout() を呼び出して app.layout を更新します。
• worker 関数を定期的に実行するため，mainloop をマルチスレッドで実行します。

# -*- 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を指定
    app.run_server(debug=False)