时间戳

首页 > 解决方案 > 使用下拉列表选择加载 Plotly Dash 数据表时出现问题

plotly - 使用下拉列表选择加载 Plotly Dash 数据表时出现问题

问题描述

我在选择下拉列表时加载破折号数据表时遇到问题。图表能够加载，但不能加载破折号数据表。没有抛出错误。任何人都可以帮助建议这里的错误是什么？提前致谢。

下面是代码片段

''' server = flask.Flask( name ) app = dash.Dash( name , server=server)

# Populate the layout with HTML and graph components
app.layout = html.Div([
    html.H5("SALES Report"),

    #Drop Down
    html.Div(
        [
            dcc.Dropdown(
                id="SALESRange",
                options=[{
                    'label': i,
                    'value': i
                } for i in SALES_Range_Options],
                value='All SALES Range'
            )
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    #CHART

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

    #TABLE
    html.H6("Details list"),
    html.Div([
    dash_table.DataTable(id='detailsresults')  ]), 

])

# Add the callbacks to support the interactive componets
@app.callback(
    Output('summarybargraph', 'figure'),
    [Input('SALESRange', 'value')])

def generate_graph(SALESRange):

    if SALESRange == "All SALES Range" : 
        df_plot = SALES_Range_CAT_df.copy()

    else:
        df_plot = SALES_Range_CAT_df[SALES_Range_CAT_df['SALES_RANGE'] == SALESRange] 

    trace1 = go.Bar(x=df_plot['SALES_RANGE'], 
                    y=df_plot['Patron_count'], 
                    name='No of Patrons',
                    text =df_plot['Patron_count'],
                    #textposition='auto',
                    #marker_color=colors # marker color can be a single color value or an iterable
                   )

    return {
        'data': [trace1],
        'layout':
         go.Layout(
            title='SALES Range for {}'.format(SALESRange)
            )
    }

def generate_table(dataframe):
    '''Given dataframe, return template generated using Dash components
    '''
    return html.Div( [dash_table.DataTable(
                #id='match-results',

                data=dataframe.to_dict('records'),
                columns=[{"name": i, "id": i} for i in dataframe.columns], 
                style_header={'backgroundColor': "#FFD700",
                                  'fontWeight': 'bold',
                                  'textAlign': 'center',},
                style_table={'overflowX': 'scroll'},  
                 style_cell={'minWidth': '180px', 'width': '180px',
                            'maxWidth': '180px','whiteSpace': 'normal'},                        

                 row_selectable="multi"),
                   html.Hr()
        ])


@app.callback(
    Output('detailsresults', 'data'),
    [
        Input('SALESRange', 'value'),
    ]
)

def load_results(SALESRange):
    results = GR_df[GR_df['SALES_RANGE'] == SALESRange]
    return generate_table(results)


if __name__ == '__main__':
    app.run_server(debug=False)

'''

标签： plotlyplotly-dash

解决方案

我认为问题在于，您的generate_table函数返回一个Div. 您的回调尝试将其添加Div到您的 DataTable 作为data.

在布局中尝试将图表更改为

#TABLE
html.H6("Details list"),
html.Div(id='detailsresults')),

并将您的回调更改为：

@app.callback(
    Output('detailsresults', 'childern'),
    [Input('SALESRange', 'value'),])

推荐阅读