使用清单动态地添加轨迹

时间:2019-03-28 05:37:03

标签: python plotly plotly-dash

我有一个不同年龄范围的数据集作为不同的列。我试图在Plotly中为每个年龄段创建动态跟踪,以创建比较条形图。此外,我希望将这些迹线连接到清单,因此我可以选择要在结果图中显示的迹线/条。但是,我很难弄清楚如何将此检查表连接到图形中的结果迹线,特别是因为我也有其他下拉列表与此图形连接。这是代码示例

    Gender=xl['Gender'].unique()
    Age=xl['Age'].unique()
    Activity=xl['Sport'].unique()

app=dash.Dash(__name__)

app.layout=html.Div(children=
[html.Div([
    html.H3('Age:', style={'paddingRight': '30px','fontSize':18}),

    dcc.Checklist(
        id='Age',
        options=[
            {'label': i, 'value': i} for i in Age],
    value='18-24' 
)], style={'width':'33%','display':'inline-block'}),

html.Div([
    html.H3('Gender:', style={'paddingRight': '30px','fontSize':18}),
    dcc.Dropdown(
        id='Gender', 
        options=[
            {'label': 'Male', 'value': 'Male'},
            {'label': 'Female', 'value': 'Female'}
        ],
        value='Male'
    )], style={'width':'33%','display':'inline-block'}),

html.H3('Activity:', style={'paddingRight': '30px','fontSize':18}), 

dcc.Dropdown(
id='Sport',
options=[
{'label': i, 'value': i} for i in Activity],
value='Yoga'
),
],style={'width':'33%','display':'inline-block'}),

html.Div([
    dcc.Graph(id='linear')]),

html.Div([
    dcc.Graph(id='linear2')
])])

@app.callback(
 dash.dependencies.Output('linear','figure'),
[dash.dependencies.Input('Gender','value'),
 dash.dependencies.Input('Sport','value'),
 dash.dependencies.Input('Age','value')])

def update_graph(Gender_name,sport_name,age_name):
      xl1=xl[xl['Gender'] == Gender_name]
      xl2=xl1[xl1['Sport'] == sport_name]
      xl3=xl2[xl2['Age'] == age_name]

      Total_x=xl3.Date

      trace1=go.Bar(x=Total_x,y=age_name?,name='6-12')
      trace2=go.Bar(x=Total_x,y=age_name?,name='12-18')
      trace3=go.Bar(x=Total_x,y=age_name,name='18-24')

      Totallayout=go.Layout(xaxis={'title': 'Year'},
                              yaxis={'title': 'Participants'},
                              title= 'Core Player Comparison',
                              hovermode='closest')


      return {'data':[trace2,trace1,trace3],
             'layout':[Totallayout]}

我希望有人可以帮助我使用def更新图函数,以便它可以链接到我在创建不同迹线时创建的年龄下拉列表。如果有人可以帮助,将不胜感激,谢谢!

示例数据框:

Date Sport性别年龄玩家核心
  2008瑜伽男6-12 2308.54 692.562
  2008瑜伽男13-17 3551.60 1065.480
  2008瑜伽男18-24 2663.70 799.110
  2008瑜伽男25-34 3551.60 1065.480
  2008瑜伽男35-44 2130.96 639.288

想法是创建一个图形,其中“玩家”或“核心”是Y轴,日期是x轴,年龄是轨迹。

1 个答案:

答案 0 :(得分:1)

感谢您使用示例df进行更新。我不确定您的目标到底是什么,但是我有数据在流传并绘制df的图表。这是一个功能示例:

dict_form = {
    'Date': [2008, 2008, 2008, 2008, 2008],
    'Sport': ['Yoga', 'Yoga', 'Yoga', 'Yoga', 'Yoga'],
    'Gender': ['Male', 'Male', 'Male', 'Male', 'Male'],
    'Age': ['6-12', '13-17', '18-24', '25-34', '35-44'],
    'Players': [2308.54, 3551.60, 2663.70, 3551.60, 2130.96],
    'Core': [692.562, 1065.480, 799.110, 1065.480, 639.288],
}

df = pandas.DataFrame.from_dict(dict_form)

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div(children=[
        html.H3('Age:', style={'paddingRight': '30px', 'fontSize': 18}),

        dcc.Checklist(
            id='Age',
            options=[
                {'label': i, 'value': i} for i in df['Age']],
            values=['18-24']
            )
    ]),

    html.Div(children=[
        html.H3('Gender:', style={'paddingRight': '30px', 'fontSize': 18}),
        dcc.Dropdown(
            id='Gender',
            options=[
                {'label': 'Male', 'value': 'Male'},
                {'label': 'Female', 'value': 'Female'}
            ],
            value='Male'
        )
    ], style={'width': '33%', 'display': 'inline-block'}),

    html.H3('Activity:', style={'paddingRight': '30px', 'fontSize': 18}),
    dcc.Dropdown(
        id='Sport',
        options=[
            {'label': i, 'value': i} for i in df['Sport']],
        value='Yoga'
    ),

    html.Div([
        dcc.Graph(id='linear')]),

    html.Div([
        dcc.Graph(id='linear2')
    ])
], style={'width': '33%', 'display': 'inline-block'})


@app.callback(
    dash.dependencies.Output('linear', 'figure'),
    [dash.dependencies.Input('Gender', 'value'),
     dash.dependencies.Input('Sport', 'value'),
     dash.dependencies.Input('Age', 'values')])
def update_graph(gender_name, sport_name, age_name):
    df1 = df[df['Gender'] == gender_name]
    df2 = df1[df1['Sport'] == sport_name]
    df3 = df2[df2['Age'].isin(age_name)]

    total_x = df3.Age

    trace1 = go.Bar(x=total_x, y=df3['Players'], name='Players')
    trace2 = go.Bar(x=total_x, y=df3['Core'], name='Core')

    total_layout = go.Layout(xaxis={'title': 'Year'},
                             yaxis={'title': 'Participants'},
                             title='Core Player Comparison',
                             hovermode='closest')

    return {'data': [trace2, trace1],
            'layout': [total_layout]}


if __name__ == '__main__':
    app.run_server(debug=True, threaded=True)

这是图表的屏幕截图:

Chart