The RangeSlider
is a 达世币核心组件,它不是一个属性Graph
(这也是 Dash 核心组件)。
这是一个简单的应用程序布局:
import dash_core_components as dcc
app.layout = html.Div(children=[
html.H1('My Dash App'),
html.Div(
[
html.Label('From 2007 to 2017', id='time-range-label'),
dcc.RangeSlider(
id='year_slider',
min=1991,
max=2017,
value=[2007, 2017]
),
],
style={'margin-top': '20'}
),
html.Hr(),
dcc.Graph(id='my-graph')
])
现在您只需定义一个回调,每次该值出现时都会调用该回调RangeSlider
变化。这是Input
这导致_update_graph
被叫。
您可以有多个输入(例如Dropdown
, 其他RangeSlider
, etc).
The Output
始终是单一的。在这个例子中,它是figure
的属性Graph
成分。
# the value of RangeSlider causes Graph to update
@app.callback(
output=Output('my-graph', 'figure'),
inputs=[Input('year_slider', 'value')]
)
def _update_graph(year_range):
date_start = '{}-01-01'.format(year_range[0])
date_end = '{}-12-31'.format(year_range[1])
# etc...
Dash 核心组件可能会导致多个组件更新。例如,一个RangeSlider
可能会导致Label
改变。
# the value of RangeSlider causes Label to update
@app.callback(
output=Output('time-range-label', 'children'),
inputs=[Input('year_slider', 'value')]
)
def _update_time_range_label(year_range):
return 'From {} to {}'.format(year_range[0], year_range[1])