Python使用Dash開發(fā)網(wǎng)頁應(yīng)用的方法詳解
Python Dash開發(fā)Web應(yīng)用的控件基礎(chǔ)
本文主要是通過Dash的Checklist組件,簡單介紹使用Dash開發(fā)的Web應(yīng)用
展示效果如下:
python dash簡單基礎(chǔ)
Dash應(yīng)用程序由兩部分組成:
- 第一部分是應(yīng)用程序的布局(Layout),它描述了應(yīng)用程序的外觀。
- 第二部分描述了應(yīng)用程序的交互性。
一、Dash的布局Layout
Dash應(yīng)用的布局描述了應(yīng)用的外觀。布局是一個分層的組件樹。
Dash HTML Components(dash.html)為所有HTML tags和HTML屬性關(guān)鍵字參數(shù)描述提供類,如style, class和id。
Dash核心組件(dash .dcc)生成高級組件,如控件和圖形。
Dash Layout有幾個特點:
- 布局由組件樹組成。
- 可創(chuàng)建復(fù)雜的可復(fù)用的組件。
- 核心組件模塊dash .dcc包含一個名為Graph的組件,Graph使用開源的plotly.js JavaScript圖形庫呈現(xiàn)交互式數(shù)據(jù)可視化。js支持超過35種圖表類型,并以矢量質(zhì)量的SVG和高性能的WebGL呈現(xiàn)圖表,詳細可參考: plotly.py documentation and gallery。
- 對于編寫文本塊,可以使用dash.dcc中的Markdown組件。
- Dash核心組件(dash .dcc)包括一組較高級的組件,如下拉菜單、圖形、標記塊等。
1、Dash的HTML組件
Dash是一個web應(yīng)用程序框架,它提供了圍繞HTML、CSS和JavaScript的純Python抽象。而不是編寫HTML或使用HTML模板引擎,用Python和Dash HTML Components模塊組成布局。
Dash HTML組件模塊是Dash的一部分,可以在https://github.com/plotly/dash找到它的源代碼。
2、Dash的Core組件
Dash配備了用于交互用戶界面的動態(tài)組件。
Dash核心組件模塊可以被導入和使用,通過 from dash import dcc 并允許訪問許多交互式組件,包括下拉菜單、檢查列表和滑塊。
dcc模塊是Dash的一部分,可以在https://github.com/plotly/dash找到它的源代碼。
二、Dash Core中的Checklist
dcc.Checklist是一個用于呈現(xiàn)一組復(fù)選框的組件。
下面我們借助Checklist控件,組建一個簡單工程,以說明Dash開發(fā)Web應(yīng)用的一些簡單內(nèi)容
Demo的目錄結(jié)構(gòu)如下:
. └── dash_demo ├── app.py └── assets ├── favicon.ico └── img ├── julia_50px_icon.png ├── python_50px_icon.png └── r_50px_icon.png
app.py的內(nèi)容如下:
from dash import Dash, html, dcc app = Dash(__name__) app.title = 'Dash控件教程' app.layout = html.Div(children=[ dcc.Checklist( options=['Python語言', 'Julia語言', 'R語言'], value=['Python語言', 'R語言'] ), dcc.Checklist( options=[ {'label': 'Python語言', 'value': '1'}, {'label': 'Julia語言', 'value': '2'}, {'label': 'R語言', 'value': '3'}, ], value=['1', '3'] ), dcc.Checklist( options={ '1': 'Python語言', '2': 'Julia語言', '3': 'R語言', }, value=['1', '3'] ), dcc.Checklist( options=[ { 'label': html.Img(src=app.get_asset_url('img/python_50px_icon.png')), 'value': 'Python語言', }, { 'label': html.Img(src=app.get_asset_url('img/julia_50px_icon.png')), 'value': 'Julia語言', }, { 'label': html.Img(src=app.get_asset_url('img/r_50px_icon.png')), 'value': 'R語言', }, ], value=['Python語言', 'R語言'] ), ]) if __name__ == '__main__': app.run_server(debug=True)
運行工程:python app.py。
瀏覽器訪問:http://127.0.0.1:8050。
Dash Demo
簡單說明:
- assets目錄,是官方推薦的用于存放我們的 Dash 應(yīng)用所依賴靜態(tài)資源文件的目錄,如依賴的 css 、 js 、 favicon.ico 、各種圖片及字體等靜態(tài)資源。
- Dash控件有多種使用形式,很靈活,例如文中的Checklist,選項的標簽(用戶看到的)和值(傳遞給回調(diào)的)是等價的。使用時,我們更傾向于將它們分開,這樣就可以很容易地更改標簽,而不更改使用該值的回調(diào)邏輯。
到此這篇關(guān)于Python使用Dash開發(fā)網(wǎng)頁應(yīng)用的方法詳解的文章就介紹到這了,更多相關(guān)Python Dash開發(fā)網(wǎng)頁應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Pandas實現(xiàn)自定義Excel格式并導出多個sheet表
pandas默認整合XlsxWriter驅(qū)動,可以自動化處理excel操作,并提供公式、設(shè)置單元格格式、可視化分析圖片等操作,本文就來和大家詳細聊聊2023-05-05Pycharm-community-2020.2.3 社區(qū)版安裝教程圖文詳解
這篇文章主要介紹了Pycharm-community-2020.2.3 社區(qū)版安裝教程圖文詳解,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12Windows 7下Python Web環(huán)境搭建圖文教程
這篇文章主要為大家詳細介紹了Windows 7下Python Web環(huán)境搭建圖文教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-03-03python生成隨機數(shù)、隨機字符、隨機字符串的方法示例
這篇文章主要介紹了python生成隨機數(shù)、隨機字符、隨機字符串的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-04-04