问题描述
我正在尝试使用Dash重新创建这个示例,但是我无法获得按钮和范围滑块.有人知道我该怎么做吗?
I am trying to recreate this Plotly example with Dash, but I cannot get the buttons and the range slider. Does anyone know how I can do this?
这就是我尝试过的:
traces =[{
'x':df.index,
'y':df.level,
'type': 'scatter',
'mode': 'lines',
'name': 'a_level'
}]
graphs.append(dcc.Graph(
id='a_level',
figure={
'data': traces,
'layout': {
'type': 'date',
'rangeslider': {'visible':True},
'margin': {'b': 0, 'r': 10, 'l': 60, 't': 0}
}
}
)
推荐答案
RangeSlider
是 Dash Core组件,它不是Graph
的属性(它也是Dash Core组件).
The RangeSlider
is a Dash Core Component, it's not an attribute of Graph
(which is also a Dash Core Component).
这是一个简单的应用布局:
Here is a simple app layout:
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
的值更改时都会调用的回调.这是导致_update_graph
被调用的Input
.您可以有多个输入(例如Dropdown
,另一个RangeSlider
等).
Now you just have to define a callback that gets called every time the value of the RangeSlider
changes. This is the Input
that causes _update_graph
to get called.You could have multiple inputs (e.g. a Dropdown
, another RangeSlider
, etc).
Output
始终是一个.在此示例中,它是Graph
组件的figure
属性.
The Output
is always a single one. In this example it's the figure
attribute of the Graph
component.
# 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 Core组件可能导致多个组件更新.例如,RangeSlider
可能导致Label
更改.
A Dash Core Component could cause several components to update. For example, a RangeSlider
could cause a Label
to change.
# 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])
这篇关于如何使用Plotly-Dash调整滑块和选择器的范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!