Python 中的Dash

Dash是一个成功的Python框架，已经成为创建数据可视化界面的受欢迎选择。它非常适合使用纯Python构建具有高度交互式用户界面的分析web应用程序。本文介绍了Dash的详细介绍以及有用的示例供您参考。

什么是Dash

Dash是由Plotly创建的Python框架，允许您创建分析型在线应用程序而无需了解JavaScript、CSS或HTML。Dash应用程序有两个主要组件：布局（layout），用于指定应用程序的外观；交互（interaction），用于指定应用程序的功能。

开始使用Dash

可以使用Python的包安装程序Pip来安装Dash。

pip install dash

安装完Dash软件包后，你可以在Python脚本中导入它

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核心组件

通过Dash提供的组件库，包括dash_core_components和dash_html_components，可使用下拉组件、图形、标记块等更高级的组件。下面是一个使用下拉组件的示例-

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)

在这个示例中，通过回调函数更新输出以显示下拉菜单中选择的项目。