【问题标题】：How to Range Slider and Selector with Plotly-Dash如何使用 Plotly-Dash 设置滑块和选择器的范围
【发布时间】：2019-07-23 00:30:35
【问题描述】：

我正在尝试使用 Dash 重新创建此 Plotly example，但我无法获取按钮和范围滑块。有谁知道我该怎么做？

这就是我尝试过的：

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

【问题讨论】：

请将您使用的代码添加到问题中。 URL 中的代码可能会更改。
这是 Plotly 网站上的一个示例（Python 中的 Range Slider 和 Selector），如果您单击链接可以看到代码。我正在努力做某事。就像 Dash 一样。
如果没有不起作用的代码，就不可能猜出正确的解决方案。
@MaximilianPeters 我编辑了问题并添加了我的代码，你知道如何在破折号中获得带有散点图的 ragerslider 吗？

标签： python plotly plotly-dash

【解决方案1】：

RangeSlider 是 Dash Core Component，它不是 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 的值发生变化时都会调用该回调。这是导致_update_graph 被调用的Input。您可以有多个输入（例如 Dropdown、另一个 RangeSlider 等）。

Output 始终是一个。在此示例中，它是 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 核心组件可能会导致多个组件更新。例如，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])

【讨论】：

rangeslider 对象将如何变化以表示两个日期之间的所有天数？我不确定范围滑块可以接受datetime 对象吗？我已设置：date_range = pd.date_range(start='1989-5-1',end='1989-9-30',freq='D') 和 dcc.RangeSlider(id = 'DateTimeSlider', updatemode = 'mouseup', min = date_range.min(), max = date_range.max(), step='D', value = [date_range.min(), date_range.max()], )
我尝试运行添加了页眉和页脚的内容，我看到了滑块和空白图表。您能否为您的解决方案提供一个工作脚本？

【解决方案2】：

rangeslider 是 xaxis 的属性。

我使用这样的东西：

app = dash.Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
    app.layout = html.Div([
        dcc.Graph(
            id='bar_plot',
            figure=go.Figure(
                data=area,
                layout=go.Layout(
                    xaxis={
                        'rangeslider': {'visible':True},
                        'rangeselector': {'visible':True, 'buttons':[{'step':'all'}, {'step':'day'}, {'step':'hour'}]}
                    },
                )))
    ])

【讨论】：

这是问题的正确答案。此外，如果您想将回调绑定到范围滑块，则要使用的属性是 relayoutData。例如，如果使用范围滑块，INPUT('bar_plot','relayoutData') 将是一个带有和xaxis.range 键的字典。

【解决方案3】：

我做了这样的事情（使用具有 datetimeindex 的 df）：

功能

def get__marks(f):

dates = {}
for z in f.index:
    dates[f.index.get_loc(z)] = {}
    dates[f.index.get_loc(z)] = str(z.month) + "-" + str(z.day)

return j

应用布局

dcc.RangeSlider(
    id='range-slider',
    updatemode='mouseup',
    min=0,
    max=len(df.index) - 1,
    count=1,
    step=1,
    value=[0, len(df.index) - 1],
    marks=get_marks(df),
)

【讨论】：