Comment Range Slider et Selector avec Plotly-Dash

Question

J'essaie de recréer ce Plotly example avec Dash, mais je ne peux pas obtenir les boutons et le curseur de plage. Est-ce que quelqu'un sait comment je peux faire ça?

Thas't comment je l'ai fait:

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} 
      } 
     } 
    ) 

Answer 1

Le RangeSlider est un Dash Core Component, ce n'est pas un attribut de Graph (qui est également un composant Dash de base).

Voici une mise en page simple application:

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') 
]) 

Maintenant, il vous suffit de définir un rappel qui est appelée à chaque fois que la valeur des RangeSlider changements. C'est le Input qui provoque l'appel de _update_graph. Vous pouvez avoir plusieurs entrées (par exemple un Dropdown, un autre RangeSlider, etc.). Le Output est toujours un seul. Dans cet exemple, il s'agit de l'attribut figure du composant Graph. Un composant Dash Core peut provoquer la mise à jour de plusieurs composants. Par exemple, un RangeSlider peut entraîner une modification de 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])