Python使用Dash開發網頁應用（二）

ython Dash開發Web應用的控件基礎

本文主要是通過Dash的Checklist組件，簡單介紹使用Dash開發的Web應用
展示效果如下：

python dash簡單基礎

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

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

1. 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.1 Dash的HTML組件

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

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

1.2 Dash的Core組件

Dash配備了用于交互用戶界面的動態組件。

Dash核心組件模塊可以被導入和使用，通過from dash import dcc 并允許訪問許多交互式組件，包括下拉菜單、檢查列表和滑塊。

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

2. 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做Web網頁開發、Dash開源庫Bootstrap用法、折疊面板插件Collapse用法

本章節我們介紹下Python數據可視化Dash框架中Dash Bootstrap Components開源庫中Bootstrap折疊面板插件Collapse的基本用法。

在此之前，我們先來了解下“Collapse”插件基本內容。

Collapse介紹

使用Collapse組件切換應用程序中內容的可見性，通過純Python編寫的Demo效果：

接下來，介紹下該控件主要函數的用法，主要用到Dash Bootstrap控件庫中的Collapse()函數，具體參數如下。

Collapse函數介紹

以下是該函數的主要參數：

children ：該組件的子組件。
id：此組件的ID，用于在回調中標識破折號組件。ID在應用中的所有組件中都必須是唯一的。
class_name ：通常與CSS一起使用，以設置具有公共屬性的元素的樣式。
is_open：Collapse當前是否打開。
loading_state ：該對象保存來自dash-renderer的加載狀態對象。
navbar：當在導航欄中使用折疊時，設置為True。
style ：定義將覆蓋先前設置的樣式的CSS樣式。

Demo代碼示例

import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

collapse_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('使用Collapse組件切換應用程序中內容的可見性', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button('展示/隱藏', color='primary', id='collapse_btn', className="me-1", n_clicks=0),
        html.Hr(),
        dbc.Collapse(
            dbc.Card('這個是Collapse內容的展示', body=True),
            id='collapse',
            is_open=True,
        )
    ]
)

@app.callback(
    Output('collapse', 'is_open'),
    [Input('collapse_btn', 'n_clicks')],
    [State('collapse', 'is_open')]
)
def toggle(n, is_open):
    return not is_open

結合代碼示例，可以調試體驗下該插件的用法，如果想了解更多內容，可關注我，對于整個示例的Demo可私信我獲取。

Dash框架中的兩個基本概念

我們先來了解一下Dash框架中的兩個基本概念

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我們轉化成Dash的Python結構就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

讀取數據并且繪制折線圖

那么我們讀取數據并且用plotly來繪制折線圖，代碼如下

app = dash.Dash()   #實例化Dash
df = px.data.stocks() #讀取股票數據 

def stock_prices():
    # 繪制折線圖
    fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig
    
app.layout = html.Div(id='parent', children=[
    html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
                                                 'marginTop': 40, 'marginBottom': 40}),
    dcc.Graph(id='line_plot', figure=stock_prices())
])

if __name__ == '__main__':
    app.run_server()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '蘋果', 'value': 'AAPL'},
                 {'label': '亞馬遜', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@app.callback(Output(component_id='bar_plot', component_property='figure'),
              [Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
    print(dropdown_value)
    # Function for creating line chart showing Google stock prices over time
    fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
                                line=dict(color='firebrick', width=4))
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

最后，全部的代碼如下所示

在線咨詢

上一篇：React開發利器深入解析classnames庫：優雅管理動態CSS類
下一篇：js取得當前url,javascript獲取當前頁面url值,js獲取域名

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商