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 的潜力，我们鼓励您进行更多研究并尝试不同的组件和回调结构。对于复杂的应用程序，其官方文档是一个极好的资源，提供了大量信息。