Python使用Dash開發網頁應用

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開發網頁應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！