Блог

Я использую plotly для создания приложения с использованием набора данных tips по умолчанию. Ниже приведен полный код, который я использую. Но проблема в том, что я не получаю выходной график, даже после отображения выходных данных с помощью app.callback декоратора.

 import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

tips = px.data.tips()

#print(tips.head())

col_options = [dict(label=x, value=x) for x in tips.columns]
#dropdown_items = ['x','y','color','facet_col','facet_row']

app = dash.Dash(__name__)

app.layout = html.Div([
        html.H1('Scatter Plot of the Tips Database'),
        html.P('Select X'),
        dcc.Dropdown(id = 'x', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Select Y'),
        dcc.Dropdown(id = 'y', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Color'),
        dcc.Dropdown(id = 'color', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Column'),
        dcc.Dropdown(id = 'facet_col', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Row'),
        dcc.Dropdown(id = 'facet_row', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.Br(),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"}),
    ])


@app.callback([Output("graph", "figure")],
              [Input('x', 'value'),
               Input('y',  'value'),
               Input('color', 'value'),
               Input('facet_col', 'value'),
               Input('facet_row', 'value')]
              )


def plot_scatter(x, y, color, facet_col, facet_row):
    fig = px.scatter( data_frame = tips, x = x, y=y, 
                     color= color, 
                     facet_row=facet_col,
                     facet_col=facet_row) 
    return fig


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

Результат, который я получаю, приведен ниже.

У вашего кода есть две основные проблемы,

• Когда вы нацелены только на один вывод (рисунок), в Dash запрещено использовать список. Следовательно, вы должны изменить [Output("graph", "figure")] на Output("graph", "figure")
• Когда все выпадающие списки не заполнены, результирующая цифра недействительна. Это должно быть как-то обработано, например, путем прерывания обновления.

Результирующий обратный вызов будет выглядеть примерно так,

 @app.callback(Output("graph", "figure"),
              [Input('x', 'value'), Input('y', 'value'), Input('color', 'value'), 
               Input('facet_col', 'value'), Input('facet_row', 'value')])
def plot_scatter(x, y, color, facet_col, facet_row):
    if not all([x, y, color, facet_col, facet_row]):
        raise PreventUpdate
    return px.scatter(data_frame=tips, x=x, y=y, color=color, facet_row=facet_col, facet_col=facet_row)
 

Когда вы загружаете страницу, первое, что dash делает в этом случае, это выполняет обратный вызов и ищет значение по умолчанию, которое вы вводите в каждый выпадающий список. Это значение по умолчанию задается в значении свойства. Поскольку вы установили значение по умолчанию равным value=» и это пустая строка, вы получите сообщение об ошибке.

 ValueError: Value of 'x' is not the name of a column in 'data_frame'. Expected one of ['total_bill', 'tip', 'sex', 'smoker', 'day', 'time', 'size'] but received:
 

Вы не можете увидеть что-то в конце ошибки, после двоеточия, но на самом деле что-то есть, пустая строка белого цвета.

Таким образом, свойство value не может быть пустой строкой value=» или чем-то, что не является значением внутри параметров в вашем выпадающем списке .

Я рекомендую установить значение по умолчанию для каждого выпадающего списка, которое имеет смысл, например, для графика

 app.layout = html.Div([
html.H1('Scatter Plot of the Tips Database'),
html.P('Select X'),
dcc.Dropdown(id = 'x', options = col_options, value='total_bill', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Select Y'),
dcc.Dropdown(id = 'y', options = col_options, value='tip', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Color'),
dcc.Dropdown(id = 'color-c', options = col_options, value='sex', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Column'),
dcc.Dropdown(id = 'facet_col', options = col_options, value='smoker', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Row'),
dcc.Dropdown(id = 'facet_row', options = col_options, value='day', placeholder='Please select...',  style = {"width": "50%"}),
html.Br(),
dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"})])
 

и вы получите этот график

и мой последний совет — изменить выпадающий идентификатор ‘color’, этот идентификатор может создать некоторые проблемы в будущем, и его будет очень трудно найти, поскольку это ошибка, которая будет жить в браузере, как вы можете видеть, я меняю его на ‘color-c’.