範囲スライダとセレクタをプロットダッシュで表示する方法

Question

このPlotly exampleをDashで再作成しようとしていますが、ボタンと範囲スライダを取得できません。私はこれをどのようにすることができるか誰にも分かっています私がやった方法

Thas't：

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

RangeSliderは、それは（もダッシュコアコンポーネントである）Graphの属性ではありません、Dash Core Componentです。ここで

はシンプルなアプリのレイアウトです：

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など）。

Outputは常に1つです。この例では、Graphコンポーネントの属性はfigureです。

# 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が変更される可能性があります。

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