Python Web Development Libraries 简明教程

Dash Framework

在本章中,我们将详细讨论 Dash 框架。

Dash 是一个用于构建分析性 Web 应用程序的开源 Python 框架。它是一个强大的库,简化了数据驱动的应用程序的开发。对于那些不太熟悉 Web 开发的 Python 数据科学家而言,它特别有用。用户可以使用 Dash 在其浏览器中创建出色的仪表板。

基于 Plotly.js、React 和 Flask 构建,Dash 将现代 UI 元素(如下拉菜单、滑块和图形)直接连接到您的分析 Python 代码。

Dash 应用程序包括一个 Flask 服务器,该服务器使用 HTTP 请求通过 JSON 数据包与前端 React 组件通信。

Dash 应用程序完全用 Python 编写,因此不需要 HTML 或 JavaScript。

Dash Setup

如果您的终端中尚未安装 Dash,请安装下面提到的 Dash 库。由于这些库处于活动开发阶段,因此请经常安装和升级库。Python 2 和 3 也受支持。

  1. pip install dash==0.23.1 # Dash 核心后端

  2. pip install dash-renderer==0.13.0 # Dash 前端

  3. pip install dash-html-components==0.11.0 # HTML 组件

  4. pip install dash-core-components==0.26.0 # 功能增强型组件

  5. pip install plotly==3.1.0 # Plotly 绘图库

为了确保一切正常工作,我们在这里创建了一个简单的 dashApp.py 文件。

Dash or App Layout

Dash 应用程序由两部分组成。第一部分是应用程序的“布局”,它基本上描述了应用程序的外观。第二部分描述了应用程序的交互性。

Core Components

我们可以用 dash_html_componentsdash_core_components 库构建布局。Dash 提供了应用程序所有可视化组件的 Python 类。我们还可以用 JavaScript 和 React.js 来自定义我们自己的组件。

import dash_core_components as dcc

import dash_html_components as html

dash_html_components 是用于所有 HTML 标签的,而 dash_core_components 用于使用 React.js 构建的交互性。

使用上述这两个库,我们来编写如下所示的代码:

app = dash.Dash()
app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.''')

相应的 HTML 代码将类似如下所示:

<div>
   <h1> Hello Dash </h1>
   <div> Dash Framework: A web application framework for Python. </div>
</div>

Writing Simple Dash app

我们将在文件 dashApp.py 中学习如何使用上述库编写一个简单的 Dash 示例。

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
   html.Div(children='''Dash Framework: A web application framework for Python.'''),

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

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

Running the Dash app

在运行 Dash 应用程序时,请注意以下几点:

(MyDjangoEnv) C:\Users\rajesh\Desktop\MyDjango\dash>python dashApp1.py

  1. 正在提供 Flask 应用程序“dashApp1”(延迟加载)

  2. 环境:productionWARNING:请勿在生产环境中使用开发服务器。请改用生产 WSGI 服务器。

  3. Debug mode: on

  4. Restarting with stat

  5. Debugger is active!

  6. Debugger PIN: 130-303-947

  7. 正在 http://127.0.0.1:8050/ 上运行(按 CTRL+C 退出)

127.0.0.1 - - [12/Aug/2018 09:32:39] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2018 09:39:52] "GET /favicon.ico HTTP/1.1" 200 -

在您的网络浏览器中访问 http:127.0.0.1:8050/ 。您应该会看到一个类似于此的应用程序。

hello dash

在上述程序中,需要特别注意以下几点:

  1. 应用程序布局由“组件”树组成,例如 html.Div 和 dcc.Graph。

  2. dash_html_components 库为您遇到的每一个 HTML 标记提供了一个组件。html.H1 (children = ‘Hello Dash’) 组件在您的应用程序中生成一个 <h1> Hello Dash </h1> HTML 元素。

  3. 并非所有组件都是纯 HTML。dash_core_components 描述了高级组件,这些组件是通过 React.js 库使用 JavaScript、HTML 和 CSS 生成的,具有交互性。

  4. 每个组件完全通过关键字属性进行描述。Dash 是声明式的:您将主要通过这些属性描述您的应用程序。

  5. children 属性很特殊。根据惯例,它始终是第一个属性,这意味着您可以省略它。

  6. Html.H1 (children=’Hello Dash’) 与 html.H1 (‘Hello Dash’) 相同。

  7. 您应用程序中的字体看起来会与这里显示的不同。此应用程序使用自定义 CSS 样式表来修改元素的默认样式。自定义字体样式是允许的,但截至目前,我们可以添加以下 URL 或您选择的任何 URL-app.css.append_css ({“external_url”:https://codepen.io/chriddyp/pen/bwLwgP.css}),以使您的文件获得与这些示例相同的外观。

More about HTML

dash_html_compoments 库包含一个用于所有 HTML 标签的组件类,以及所有 HTML 参数的关键字参数。

让我们在先前应用文本中添加组件的内联样式 -

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
colors = {
   'background': '#87D653',
   'text': '#ff0033'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
   html.H1(
      children='Hello Dash',
      style={
         'textAlign': 'center',
         'color': colors['text']
      }
   ),

   html.Div(children='Dash: A web application framework for Python.', style={
      'textAlign': 'center',
      'color': colors['text']
   }),

   dcc.Graph(
      id='example-graph-2',

      figure={
         'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
         ],
         'layout': {
            'plot_bgcolor': colors['background'],
            'paper_bgcolor': colors['background'],
            'font': {
               'color': colors['text']
            }
         }
      }
   )
])

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

在上面的示例中,我们使用 style 属性修改了 html.Div 和 html.H1 组件的内联样式。

style property

它在 Dash 应用程序中被渲染如下 -

data application

dash_html_components 和 HTML 属性有一些关键区别 -

  1. 对于 Dash 中的 style 属性,你只需提供一个字典,而 HTML 中是分号分隔的字符串。

  2. Style 字典键是 camelCased ,因此 text-align 更改为 textalign

  3. Dash 中的 ClassName 类似于 HTML class 属性。

  4. 第一个参数是通过 children 关键字参数指定 HTML 标签的子级。

Reusable Components

通过用 Python 编写我们的标记,我们可以创建复杂的、可重用的组件(比如表格),而无需切换上下文或语言 -

下面是一个快速示例,它从 pandas 数据框生成一个“表格”。

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/'
   'c78bf172206ce24f77d6363a2d754b59/raw/'
   'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
   'usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
   return html.Table(
      # Header
      [html.Tr([html.Th(col) for col in dataframe.columns])] +
      # Body
      [html.Tr([
         html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
      ]) for i in range(min(len(dataframe), max_rows))]
   )

app = dash.Dash()
app.layout = html.Div(children=[
   html.H4(children='US Agriculture Exports (2011)'),
   generate_table(df)
])

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

我们的输出将类似于 -

reusable components

More about Visualization

dash_core_components 库包含一个名为 Graph 的组件。

Graph 使用开源 plotly.js JavaScript 绘图库呈现交互式数据可视化。Plotly.js 支持约 35 种图表类型,并在矢量质量 SVG 和高性能 WebGL 中呈现图表。

下面是一个从 Pandas 数据框创建散点图的示例 -

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
   'https://gist.githubusercontent.com/chriddyp/' +
   '5d1ea79569ed194d432e56108a04d188/raw/' +
   'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
   'gdp-life-exp-2007.csv')

app.layout = html.Div([
   dcc.Graph(
      id='life-exp-vs-gdp',
      figure={
         'data': [
            go.Scatter(
               x=df[df['continent'] == i]['gdp per capita'],
               y=df[df['continent'] == i]['life expectancy'],
               text=df[df['continent'] == i]['country'],
               mode='markers',
               opacity=0.7,
               marker={
                  'size': 15,
                  'line': {'width': 0.5, 'color': 'white'}
               },
               name=i
            ) for i in df.continent.unique()
         ],
         'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy'},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
         )
      }
   )
])

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

以上代码的输出如下所示 -

visualization

这些图形是交互式的和响应式的。你可以将鼠标悬停在点上以查看其值,单击图例项以切换迹线,单击并拖动进行缩放,按住 shift 并单击并拖动进行平移。

Markdown

当 dash 通过 dash_html_components 库展现 HTML 风格时,用 HTML 编写副本可能很乏味。对于书写文本块,你可以在 dash_core_components 库中使用 Markdown 组件。

Core Components

dash_core_components 包含一组更高级别的组件,如下拉菜单、图形、markdown、块等等。

与其他所有 Dash 组件一样,它们是完全声明式描述的。每个可配置选项都作为组件的关键字参数提供。

下面是这个示例,用到了一些可用的组件−

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
   html.Label('Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),

   html.Label('Multi-Select Dropdown'),
   dcc.Dropdown(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value=['MTL', 'SF'],
      multi=True
   ),

   html.Label('Radio Items'),
   dcc.RadioItems(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      value='MTL'
   ),

   html.Label('Checkboxes'),
   dcc.Checklist(
      options=[
         {'label': 'New York City', 'value': 'NYC'},
         {'label': u'Montréal', 'value': 'MTL'},
         {'label': 'San Francisco', 'value': 'SF'}
      ],
      values=['MTL', 'SF']
   ),

   html.Label('Text Input'),
   dcc.Input(value='MTL', type='text'),

   html.Label('Slider'),
   dcc.Slider(
      min=0,
      max=9,
      marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
      value=5,
   ),
], style={'columnCount': 2})

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

以上程序的输出如下−

core components

Calling Help

Dash 组件是声明式的。在安装时,这些组件的每一个可配置方面均作为关键字参数设置。你可以在你的 Python 控制台中,在组件上调用帮助来学习更多关于一个组件和它的可用参数的信息。其中一些信息如下−

>>> help(dcc.Dropdown)
Help on class Dropdown in module builtins:
class Dropdown(dash.development.base_component.Component)
| A Dropdown component.
| Dropdown is an interactive dropdown element for selecting one or more

| items.
| The values and labels of the dropdown items are specified in the `options`
| property and the selected item(s) are specified with the `value` property.
|
| Use a dropdown when you have many options (more than 5) or when you are
| constrained for space. Otherwise, you can use RadioItems or a Checklist,
| which have the benefit of showing the users all of the items at once.
|
| Keyword arguments:
| - id (string; optional)
| - options (list; optional): An array of options
| - value (string | list; optional): The value of the input. If `multi` is false (the default)
-- More --

总之,Dash 应用程序的布局描述了应用程序的外观。布局是一个组件的层级树。dash_html_components 库为所有 HTML 标签和关键字参数提供了类,描述了 HTML 属性,如样式、类名和 id。dash_core_components 库生成了高级组件,如控件和图表。