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

xiaoxiao2025-07-21 13

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

最新回复(0)