Dash by plotly 簡單介紹

Dash 介紹

建立 flask 輕量級網頁框架 ,前端運用react,圖形介面 plotly顯示.

基本認知

• html : 建立網頁的標準標示語言。
• flask : 輕量級Web應用框架。
• python : 程式語言。
• plotly : 圖表繪製工具。

安裝

# terminal mode
> python3 -m venv venv   # 創建虛擬環境
> source venv/bin/activate # 建立虛擬環境
> pip install dash==0.21.0  #
> pip install dash-renderer==0.11.3  # 
> pip install dash-html-components==0.9.0  # 
> pip install dash-core-components==0.21.0  #
> pip install plotly --upgrade  #

簡易開局

# terminal 也可以選用熟悉的編輯軟體 Vs code ...
> mkdir dash_demo.py
> nano dash_demo.py 

dash_demo.py

Component Libraries

• Dash HTML Components
• Dash Core Components

利用React components 編寫了一些html介面

html 轉譯

利用Callback 傳輸資料

• dash.layout : html 布局
• dash_core_components : react模組
• dash_html_components : html 語法
• dash.dependencies : callback 傳遞資料

Example : 有興趣直接看dash 範例

結論: Dash 所編寫的模式,對於我個人是蠻喜歡的,在有一定的基礎下,只需要編排python的語法,即可做出美觀的視覺圖像化,在小企業內部設置簡易的micro server下,使用這些模組既方便又快速.

參考：

1. nodejs\Reactjs
2. Python\flask\Dash