Python使用Dash開發(fā)網(wǎng)頁應(yīng)用（二）

ython 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)用程序的交互性。

1. 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)建復雜的可復用的組件
核心組件模塊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.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 找到它的源代碼。

1.2 Dash的Core組件

Dash配備了用于交互用戶界面的動態(tài)組件。

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

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

2. Dash Core中的Checklist

dcc.Checklist是一個用于呈現(xiàn)一組復選框的組件。

下面我們借助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做Web網(wǎng)頁開發(fā)、Dash開源庫Bootstrap用法、折疊面板插件Collapse用法

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

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

Collapse介紹

使用Collapse組件切換應(yīng)用程序中內(nèi)容的可見性，通過純Python編寫的Demo效果：

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

Collapse函數(shù)介紹

以下是該函數(shù)的主要參數(shù)：

children ：該組件的子組件。
id：此組件的ID，用于在回調(diào)中標識破折號組件。ID在應(yīng)用中的所有組件中都必須是唯一的。
class_name ：通常與CSS一起使用，以設(shè)置具有公共屬性的元素的樣式。
is_open：Collapse當前是否打開。
loading_state ：該對象保存來自dash-renderer的加載狀態(tài)對象。
navbar：當在導航欄中使用折疊時，設(shè)置為True。
style ：定義將覆蓋先前設(shè)置的樣式的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組件切換應(yīng)用程序中內(nèi)容的可見性', 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內(nèi)容的展示', 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

結(jié)合代碼示例，可以調(diào)試體驗下該插件的用法，如果想了解更多內(nèi)容，可關(guān)注我，對于整個示例的Demo可私信我獲取。

Dash框架中的兩個基本概念

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

Layout
Callbacks

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

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

我們轉(zhuǎn)化成Dash的Python結(jié)構(gòu)就是

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

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

安裝和導入模塊

在導入模塊之前，我們先用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模塊，因為我們需要用到的數(shù)據(jù)來自該模塊，里面是一眾互聯(lián)網(wǎng)公司過去一段時間中股價的走勢

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

讀取數(shù)據(jù)并且繪制折線圖

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

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

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復制到瀏覽器當中便可以看到出來的結(jié)果了，如下所示

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

添置一個下拉框

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

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

output

options參數(shù)中的label對應(yīng)的是下拉框中的各個標簽，而value對應(yīng)的是DataFrame當中的列名

df.head()

output

添加回調(diào)函數(shù)

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

@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參數(shù)，里面的component_id對應(yīng)的是下拉框的id也就是dropdown，而Output參數(shù)，當中的component_id對應(yīng)的是折線圖的id也就是bar_plot，我們來看一下最后出來的結(jié)果如下

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

在線咨詢

上一篇：React開發(fā)利器深入解析classnames庫：優(yōu)雅管理動態(tài)CSS類
下一篇：js取得當前url,javascript獲取當前頁面url值,js獲取域名

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商