如何使用Plotly-Dash范围滑块和选择器

时间:2017-10-02 04:29:14

标签: python plotly plotly-dash

我正在尝试使用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}
            }
        }
    )

3 个答案:

答案 0 :(得分:2)

g = Github("user", "pass") repoName = "apiTest" source_branch = 'master' target_branch = 'newfeature' repo = g.get_user().get_repo(repoName) sb = repo.get_branch(source_branch) repo.create_git_ref(ref='refs/heads/' + target_branch, sha=sb.commit.sha) Dash Core Component,它不是RangeSlider的属性(也是虚拟核心组件)。

这是一个简单的应用布局:

Graph

现在你只需要定义一个每次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被调用的Input。 您可以有多个输入(例如_update_graph,另一个Dropdown等)。

RangeSlider始终是单一的。在此示例中,它是Output组件的figure属性。

Graph

Dash核心组件可能会导致多个组件更新。例如,# 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... 可能会导致RangeSlider更改。

Label

答案 1 :(得分:0)

rangesliderxaxis的属性。

我使用这样的东西:

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

答案 2 :(得分:0)

我做了这样的事情(使用具有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),
)