Python使用Dash開發網頁應用的方法詳解

2022-09-20 22:02:09

Python Dash開發Web應用的控制元件基礎

本文主要是通過Dash的Checklist元件，簡單介紹使用Dash開發的Web應用

展示效果如下：

python dash簡單基礎

Dash應用程式由兩部分組成：

第一部分是應用程式的佈局（Layout），它描述了應用程式的外觀。
第二部分描述了應用程式的互動性。

一、Dash的佈局Layout

Dash應用的佈局描述了應用的外觀。佈局是一個分層的元件樹。

Dash HTML Components(dash.html)為所有HTML tags和HTML屬性關鍵字引數描述提供類，如style, class和id。

Dash核心元件(dash .dcc)生成高階元件，如控制元件和圖形。

Dash Layout有幾個特點：

佈局由元件樹組成。
可建立複雜的可複用的元件。
核心元件模組dash .dcc包含一個名為Graph的元件，Graph使用開源的plotly.js JavaScript圖形庫呈現互動式資料視覺化。js支援超過35種圖表型別，並以向量質量的SVG和高效能的WebGL呈現圖表，詳細可參考： plotly.py documentation and gallery。
對於編寫文字塊，可以使用dash.dcc中的Markdown元件。
Dash核心元件(dash .dcc)包括一組較高階的元件，如下拉式選單、圖形、標記塊等。

1、Dash的HTML元件

Dash是一個web應用程式框架，它提供了圍繞HTML、CSS和JavaScript的純Python抽象。而不是編寫HTML或使用HTML模板引擎，用Python和Dash HTML Components模組組成佈局。

Dash HTML元件模組是Dash的一部分，可以在https://github.com/plotly/dash找到它的原始碼。

2、Dash的Core元件

Dash配備了用於互動使用者介面的動態元件。

Dash核心元件模組可以被匯入和使用，通過 from dash import dcc 並允許存取許多互動式元件，包括下拉式選單、檢查列表和滾軸。

dcc模組是Dash的一部分，可以在https://github.com/plotly/dash找到它的原始碼。

二、Dash Core中的Checklist

dcc.Checklist是一個用於呈現一組核取方塊的元件。

下面我們藉助Checklist控制元件，組建一個簡單工程，以說明Dash開發Web應用的一些簡單內容

Demo的目錄結構如下：

.
└── dash_demo
    ├── app.py
    └── assets
        ├── favicon.ico
        └── img
            ├── julia_50px_icon.png
            ├── python_50px_icon.png
            └── r_50px_icon.png

app.py的內容如下：

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 應用所依賴靜態資原始檔的目錄，如依賴的 css 、 js 、 favicon.ico 、各種圖片及字型等靜態資源。
Dash控制元件有多種使用形式，很靈活，例如文中的Checklist，選項的標籤(使用者看到的)和值(傳遞給回撥的)是等價的。使用時，我們更傾向於將它們分開，這樣就可以很容易地更改標籤，而不更改使用該值的回撥邏輯。

到此這篇關於Python使用Dash開發網頁應用的方法詳解的文章就介紹到這了,更多相關Python Dash開發網頁應用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！