Недопустимая опора для этого компонента

#python #plotly-dash #dashboard

Вопрос:

Я запускаю это приложение с помощью Python Dash .Я продолжаю получать эту ошибку, даже если приложение загружается для меня идеально. Не могли бы вы, пожалуйста, помочь мне определить, где я иду не так?

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


df = px.data.tips()

sales1 = pd.read_csv("sales_data_sample.csv", encoding='unicode_escape')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Label('Process Monitoring Dashboard',style={'font-size':'25px','color':'blue','margin-left': '50%'},id='w_countries')
       ]),
    
    html.P("Process End Date",style={'margin-left': '10%'}),
    dcc.Dropdown(
        id='ped', 
        value='-Select Process End Date', 
        options=[{'value': x, 'label': x} 
                 for x in ['2021', '2022', '2023', '2024']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("User Or Role",style={'margin-left': '10%'}),
    dcc.Dropdown(
        id='uor', 
        value='-Select User Or Role', 
        options=[{'value': x, 'label': x} 
                 for x in ['Admin', 'Guest User']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("Process Start Date",style={'margin-left': '10%'}),
    dcc.Dropdown(
        
        id='psd', 
        value='-Select Process Start Date', 
        options=[{'value': x, 'label': x} 
                 for x in ['2021', '2022', '2023', '2024']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("Process",style={'margin-left': '10%'}),
    dcc.Dropdown(
        
        id='p', 
        value='-Select Process', 
        options=[{'value': x, 'label': x} 
                 for x in ['Disputed','In Process','On Hold','Resolved','Cancelled']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    # Create pie chart 
    html.Div([
    html.Br(),
    dcc.Graph(id='pie',
              config={'displayModeBar': 'hover'}),
 
        ],style={'margin-left': '1.4%', 'width': '50%', 'display': 'inline-block'}),
    # Create horizontal bar chart (top 10 countries)
    html.Div([
    html.Br(),
    dcc.Graph(id='top_10',
              config={'displayModeBar': 'hover'}),
 
        ], style={'width': '48.6%', 'display': 'inline-block', 'float': 'right'})
])

@app.callback(Output('pie', 'figure'),
              [Input('w_countries', 'value')])
def display_content(w_countries):
    Cancelled = sales1.loc[sales1['STATUS'] == 'Cancelled'].count()[0]
    Disputed = sales1.loc[sales1['STATUS'] == 'Disputed'].count()[0]
    In_Process = sales1.loc[sales1['STATUS'] == 'In Process'].count()[0]
    On_Hold = sales1.loc[sales1['STATUS'] == 'On Hold'].count()[0]
    Resolved = sales1.loc[sales1['STATUS'] == 'Resolved'].count()[0]
    Shipped = sales1.loc[sales1['STATUS'] == 'Shipped'].count()[0]
 
    return {
        'data': [go.Pie(labels=['Cancelled', 'Disputed', 'In Process', 'On Hold', 'Resolved', 'Shipped'],
                        values=[Cancelled, Disputed, In_Process, On_Hold, Resolved, Shipped],
                        hoverinfo='label value percent',
                        textinfo='label value',
                        textposition='auto',
                        textfont=dict(size=13),
                        insidetextorientation='radial',
                        rotation=70,
 
                        )],
 
        'layout': go.Layout(
            width=780,
            height=520,
            hovermode='closest',
            title={
                'text': 'Instance By Process',
                'y': 0.93,
                'x': 0.43,
                'xanchor': 'center',
                'yanchor': 'top'},
            titlefont={'family': 'Oswald',
                   'color': 'rgb(230, 34, 144)',
                   'size': 25},
            legend={
                'orientation': 'h',
                'bgcolor': 'rgba(255,255,255,0)',
                'xanchor': 'center', 'x': 0.5, 'y': -0.05},
            ),
 
 
        }
# Create horizontal bar chart (top 10 countries)
@app.callback(Output('top_10', 'figure'),
              [Input('w_countries', 'value')])
def update_graph(w_countries):
    top_countries = sales1.groupby(['COUNTRY'])[['SALES', 'QUANTITYORDERED']].sum().sort_values(by=['SALES'], ascending=False).nlargest(10, columns=['SALES']).reset_index()
 
 
    return {
        'data': [go.Bar(x=top_countries['SALES'],
                            y=top_countries['COUNTRY'],
                            text=top_countries['SALES'],
                            texttemplate='%{text:.2s}',
                            textposition='inside',
                            marker=dict(
                                color=top_countries['SALES'],
                                colorscale='portland',
                                showscale=False),
                            orientation='h',
                            hoverinfo='text',
                            hovertext=
                            '<b>Country</b>: '   top_countries['COUNTRY'].astype(str)   '<br>'  
                            '<b>Sales</b>: 

И в этом моя ошибка

Недопустимая опора для этого свойства компонента "значение" использовалась с идентификатором компонента: "w_countries" в одном из входных элементов обратного вызова. Этот идентификатор присваивается dash_html_компонентам.Компонент метки в макете, который не поддерживает это свойство. Этот идентификатор использовался в обратном вызове(ах) для вывода(ов): круг.рисунок top_10.рисунок


Ответ №1:

Вы сказали Dash использовать компонент value from a Label в качестве входных данных для обратного вызова. Но Label это не имеет никакого значения, и это не так интерактивно. Вам нужно использовать другой ввод для этого обратного вызова.

[f'{x:,.0f}' for x in top_countries['SALES']] '<br>'
'<b>Q.Ordered</b>:И в этом моя ошибка

Недопустимая опора для этого свойства компонента "значение" использовалась с идентификатором компонента: "w_countries" в одном из входных элементов обратного вызова. Этот идентификатор присваивается dash_html_компонентам.Компонент метки в макете, который не поддерживает это свойство. Этот идентификатор использовался в обратном вызове(ах) для вывода(ов): круг.рисунок top_10.рисунок

Ответ №1:

Вы сказали Dash использовать компонент value from a Label в качестве входных данных для обратного вызова. Но Label это не имеет никакого значения, и это не так интерактивно. Вам нужно использовать другой ввод для этого обратного вызова.

[f'{x:,.0f}' for x in top_countries['QUANTITYORDERED']] '<br>'

)],

'layout': go.Layout(
width=780,
height=520,
# plot_bgcolor='rgb(250, 242, 242)',
# paper_bgcolor='rgb(250, 242, 242)',
title={
'text': 'Top 10 Countries with active customers',
'y': 0.93,
'x': 0.43,
'xanchor': 'center',
'yanchor': 'top'},
titlefont={'family': 'Oswald',
'color': 'rgb(230, 34, 144)',
'size': 25},

hovermode='closest',

xaxis=dict(title='<b>Sales</b>',

color='rgb(230, 34, 144)',
showline=True,
showgrid=True,
showticklabels=True,
linecolor='rgb(104, 204, 104)',
linewidth=2,
ticks='outside',
tickfont=dict(
family='Arial',
size=12,
color='rgb(17, 37, 239)'
)

),

yaxis=dict(title='<b>Country</b>',
autorange='reversed',
color='rgb(230, 34, 144)',
showline=True,
showgrid=False,
showticklabels=True,
linecolor='rgb(104, 204, 104)',
linewidth=2,
ticks='outside',
tickfont=dict(
family='Arial',
size=12,
color='rgb(17, 37, 239)'
)

)

)
}

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

И в этом моя ошибка

Недопустимая опора для этого свойства компонента «значение» использовалась с идентификатором компонента: «w_countries» в одном из входных элементов обратного вызова. Этот идентификатор присваивается dash_html_компонентам.Компонент метки в макете, который не поддерживает это свойство. Этот идентификатор использовался в обратном вызове(ах) для вывода(ов): круг.рисунок top_10.рисунок

Ответ №1:

Вы сказали Dash использовать компонент value from a Label в качестве входных данных для обратного вызова. Но Label это не имеет никакого значения, и это не так интерактивно. Вам нужно использовать другой ввод для этого обратного вызова.