【数据科学系列】基于Python的Web应用框架Dash-Dash Core Components进阶

Dash Core Components（Dash 核心组件）

• 下拉列表框

import dash_core_components as dcc

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

import dash_core_components as dcc

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

• 范围滑块

import dash_core_components as dcc

dcc.RangeSlider(
    count=1,
    min=-5,
    max=10,
    step=0.5,
    value=[-3, 7]
)

import dash_core_components as dcc

dcc.RangeSlider(
    marks={i: 'Label {}'.format(i) for i in range(-5, 7)},
    min=-5,
    max=6,
    value=[-3, 4]
)

• 输入框

import dash_core_components as dcc

dcc.Input(
    placeholder='Enter a value...',
    type='text',
    value=''
)

• 输入区域；多行文本

import dash_core_components as dcc

dcc.Textarea(
    placeholder='Enter a value...',
    value='This is a TextArea component',
    style={'width': '100%'}
)

• 复选框

import dash_core_components as dcc

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

import dash_core_components as dcc

dcc.Checklist(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    values=['MTL', 'SF'],
    labelStyle={'display': 'inline-block'}
)

• 单选框

import dash_core_components as dcc

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

import dash_core_components as dcc

dcc.RadioItems(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value='MTL',
    labelStyle={'display': 'inline-block'}
)

按钮

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div(dcc.Input(id='input-box', type='text')),
    html.Button('Submit', id='button'),
    html.Div(id='output-container-button',
             children='Enter a value and press submit')
])


@app.callback(
    dash.dependencies.Output('output-container-button', 'children'),
    [dash.dependencies.Input('button', 'n_clicks')],
    [dash.dependencies.State('input-box', 'value')])
def update_output(n_clicks, value):
    return 'The input value was "{}" and the button has been clicked {} times'.format(
        value,
        n_clicks
    )


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

• 日期单一选择器

• 日期范围选择器

• Markdown支持

• 交互式表格

• 上传组件

• 切换标签

• 图片
  Graph组件与开源的plotly.py库共享相同的语法。

import dash_core_components as dcc
import plotly.graph_objs as go

dcc.Graph(
    figure=go.Figure(
        data=[
            go.Bar(
                x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                   2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                y=[219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                   350, 430, 474, 526, 488, 537, 500, 439],
                name='Rest of world',
                marker=go.bar.Marker(
                    color='rgb(55, 83, 109)'
                )
            ),
            go.Bar(
                x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                   2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                   299, 340, 403, 549, 499],
                name='China',
                marker=go.bar.Marker(
                    color='rgb(26, 118, 255)'
                )
            )
        ],
        layout=go.Layout(
            title='US Export of Plastic Scrap',
            showlegend=True,
            legend=go.layout.Legend(
                x=0,
                y=1.0
            ),
            margin=go.layout.Margin(l=40, r=0, t=40, b=30)
        )
    ),
    style={'height': 300},
    id='my-graph'
)

• 确认对话框

import dash_core_components as dcc

confirm = dcc.ConfirmDialog(
    id='confirm',
    message='Danger danger! Are you sure you want to continue?'
)

与按钮绑定

import dash_core_components as dcc
import dash_html_components as html

confirm = dcc.ConfirmDialogProvider(
    children=html.Button(
        'Click Me',
    ),
    id='danger-danger',
    message='Danger danger! Are you sure you want to continue?'
)

• 存储
  存储组件可用于将数据保存在访问者的浏览器中。数据的范围限定为访问页面的用户。

三种类型的存储（storage_type特性）：
memory：默认情况下，只要页面未刷新，就保持数据。
local：保留数据，直到手动清除。
session：保留数据，直到浏览器/选项卡关闭。
对于local/ session，数据在存储时被序列化为json。

import dash_core_components as dcc

store = dcc.Store(id='my-store', data={'my-data': 'data'})

• 注销按钮
  注销按钮可用于执行注销机制。

这是一个带有提交按钮的简单表单，当单击按钮时，它会将表单提交给logout_url道具。

请注意，默认情况下不会在Dash中执行身份验证，您必须自己实现身份验证。

• 加载组件
  加载组件可用于包装要显示微调器的组件（如果加载时间太长）。它通过检查任何Loading组件的子组件是否具有loading_stateprop设置的位置is_loading来实现此操作。如果为true，它将显示一个内置的CSS微调器。

import dash_core_components as dcc
import dash_html_components as html

loading = dcc.Loading([
    # ...
])

• 位置组件
  location 组件表示Web浏览器中的位置栏。通过它href，pathname， search和hash属性你可以访问你的应用程序的URL的不同部分。

* splited url below
http://127.0.0.1:8050/page-2?a=test#quiz：

* href = "http://127.0.0.1:8050/page-2?a=test#quiz"
* pathname = "/page-2"
* search = "?a=test"
* hash = "#quiz"

import dash_core_components as dcc

location = dcc.Location(id='url', refresh=False)

---

更多资料，请访问：https://dash.plot.ly/dash-core-components