Python 的 Dash 入門

---

Dash 是一個成功的 Python 框架，已成為建立資料視覺化介面的流行選擇。它非常適合使用純 Python 構建具有高度互動式使用者介面的分析型 Web 應用程式。本文將對 Dash 進行全面介紹，並提供一些有用的示例來幫助您入門。

什麼是 Dash？

Dash 是 Plotly 建立的一個 Python 框架，允許您建立分析型線上應用程式，無需瞭解 JavaScript、CSS 或 HTML。Dash 應用程式有兩個主要組成部分：佈局，它指定應用程式的外觀；互動，它指定應用程式的功能。

Dash 入門

可以使用 Python 的包安裝程式 Pip 來安裝 Dash：

pip install dash

安裝完成後，您可以在 Python 指令碼中匯入 Dash 包：

import dash
import dash_core_components as dcc
import dash_html_components as html

構建 Dash 應用程式

現在讓我們看看如何建立一個 Dash 應用程式。

示例 1：一個基本的 Dash 應用程式

此處提供了一個非常簡單的 Dash 應用程式的程式碼：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello, Dash!'),

   html.Div(children='''
      Dash: A web application framework for Python.
   '''),

   dcc.Graph(
      id='example-graph',
      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montreal'},
         ],
         'layout': {
            'title': 'Dash Data Visualization'
         }
      }
   )
])

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

該程式顯示一個標題、一段文字和一個簡單的條形圖。

示例 2：使用 Dash 回撥實現互動性

Dash 使用回撥使應用程式具有互動性。回撥將各個部分連線起來，以便隨著輸入的變化，輸出也會變化。這是一個示例：

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='my-input', value='initial value', type='text'),
   html.Div(id='my-output')
])

@app.callback(
   Output(component_id='my-output', component_property='children'),
   [Input(component_id='my-input', component_property='value')]
)
def update_output_div(input_value):
   return 'You've entered "{}"'.format(input_value)

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

在此示例中，如果“my-input”元件發生變化，則回撥會更新“my-output”元件。

示例 3：多個輸入和輸出

Dash 支援具有多個輸入和輸出的回撥：

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Input(id='input-1', type='text'),
   dcc.Input(id='input-2', type='text'),
   html.Div(id='output')
])

@app.callback(
   Output(component_id='output', component_property='children'),
   [Input(component_id='input-1', component_property='value'),
   Input(component_id='input-2', component_property='value')]
)
def update_output_div(input1, input2):
   return 'You've entered "{}" and "{}"'.format(input1, input2)

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

在此示例中，兩個輸入元件連線到回撥函式 update_output_div。輸出元件會更新以反映任一輸入值的任何變化。

示例 4：使用 Dash Core Components

Dash 提供的元件庫（包括 dash_core_components 和 dash_html_components）提供了更高級別的元件，例如下拉選單、圖表、Markdown 塊等等。這是一個使用下拉選單元件的示例：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
   dcc.Dropdown(
      id='dropdown',
      options=[
         {'label': 'Option 1', 'value': '1'},
         {'label': 'Option 2', 'value': '2'},
         {'label': 'Option 3', 'value': '3'}
      ],
      value='1'
   ),
   html.Div(id='display-selected-values')
])

@app.callback(
   dash.dependencies.Output('display-selected-values', 'children'),
   [dash.dependencies.Input('dropdown', 'value')])
def set_display_children(selected_value):
   return 'You've selected "{}"'.format(selected_value)

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

在此示例中，輸出透過回撥函式更新，以顯示從下拉選單中選擇的專案。

結論

Python 框架 Dash 提供了一個有效的工具集，用於構建基於 Web 的資料視覺化應用程式。其多功能性允許使用者僅使用 Python 程式碼構建複雜且互動式的資料面板，使其成為資料科學領域中非常受歡迎的工具。

本文介紹了 Dash 及其功能，包括如何安裝它以及如何將其與 Python 程式設計一起使用。此外，我們還查看了四個示例，每個示例都展示瞭如何以不同的方式開發 Dash 應用程式，包括如何設計一個簡單的程式、新增帶有回撥的互動、使用多個輸入和輸出以及使用 Dash 的核心元件。

但是，此處提供的示例只是 Dash 潛力的冰山一角。為了進一步瞭解 Dash 的潛力，我們鼓勵您進行更多研究並嘗試不同的元件和回撥結構。對於複雜的應用程式，其官方文件是一個極好的資源，提供了大量資訊。