トップページ -> データベース関連技術 -> Web サービスのプログラミング -> Dash のインストールと動作確認
[サイトマップへ], [サイト内検索へ]

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

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

サイト内の関連ページ

参考Webページ


Python のインストール

※ 以下、Windowsでの手順で説明する.Ubuntu等でも同様の手順になる.


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

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

  1. Window でコマンドプロンプトを実行
  2. (オプション)Anaconda を使いたい場合には、次の操作を行う Dash のインストールと動作確認
    トップページ -> データベース関連技術 -> Web サービスのプログラミング -> Dash のインストールと動作確認
    [サイトマップへ], [サイト内検索へ]

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

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

    サイト内の関連ページ

    参考Webページ


    Python のインストール

    ※ 以下、Windowsでの手順で説明する.Ubuntu等でも同様の手順になる.


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

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

    1. Windows では,コマンドプロン プトを管理者として実行

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

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

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

      Windows の場合

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

      [image]
      (以下省略)

      Ubuntu の場合

      sudo python3 -m pip install dash==0.39.0
      sudo python3 -m pip 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. Python プログラムを実行

        ※ Python プログラムを動かすために, Windows では,「python」コマンドを使う. Ubuntu では「python3」コマンドを使う.

        開発環境や Python コンソール(Jupyter Qt ConsolespyderPyCharmPyScripter など)も便利である.

        python hoge.py
        

        [image]

        Ubuntu の場合

        、次のコマンドを実行
        python3 hoge.py
        

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

        [image]

    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)
    

    [image]


    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)
    

本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]

Anaconda を使わない場合には、次の操作は無視すること
conda install simplejson flask plotly
  • 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
    

    [image]
    (以下省略)

    Ubuntu の場合

    sudo python3 -m pip install dash==0.39.0
    sudo python3 -m pip install dash-daq==0.1.0
    
  • 動作確認
    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. Python プログラムを実行

      ※ Python プログラムを動かすために, Windows では,「python」コマンドを使う. Ubuntu では「python3」コマンドを使う.

      開発環境や Python コンソール(Jupyter Qt ConsolespyderPyCharmPyScripter など)も便利である.

      python hoge.py
      

      [image]

      Ubuntu の場合

      、次のコマンドを実行
      python3 hoge.py
      

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

      [image]

    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)
    

    [image]


    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)
    

    本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

    問い合わせ先: 金子邦彦(かねこ くにひこ) [image]