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)圖表，詳細(xì)可參考： plotly.py documentation and gallery。
• 對于編寫文本塊，可以使用dash.dcc中的Markdown組件。
• Dash核心組件(dash .dcc)包括一組較高級的組件，如下拉菜單、圖形、標(biāo)記塊等。

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核心組件模塊可以被導(dǎo)入和使用，通過 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，選項的標(biāo)簽(用戶看到的)和值(傳遞給回調(diào)的)是等價的。使用時，我們更傾向于將它們分開，這樣就可以很容易地更改標(biā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)文章希望大家以后多多支持腳本之家！

最新評論