如何使用Plotly-Dash调整滑块和选择器的范围 [英] How to Range Slider and Selector with Plotly-Dash

问题描述

我正在尝试使用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调整滑块和选择器的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！