根據 Plotly Dash 中的輸入動態改變條形圖

Question

在很長一段時間里，我都在嘗試設計我的第一個 Dash 應用程序。 但是我沒有成功，因此我想尋求幫助。

我想要實現的是一個應用程序，首先我input一些數字，根據這些數字我對給定的dataframe進行一些計算，然后做一個bar chart 。 這應該不難。

到目前為止，我得到的是：

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        html.I("Get me the first input needed", style={"margin-right": "115px"}),
        html.I("Get me an additional input to the first one too!"),
        html.Br(),
        dcc.Input(id="input1", type="number", placeholder="", style={'marginRight':'10px'}),
        dcc.Input(id="input11", type="number", placeholder="", style={'marginRight':'10px'}),
        ... another 3 very similar blocks for inputs,
        dcc.Slider(min=0, max=10, step=1,
               value=5,
               id='my_slider',
               marks={
                        1: {'label': '1 year', 'style': {'color': '#77b0b1'}},
                        2: {'label': '2 years'},
                        3: {'label': '3 years'},
                        4: {'label': '4 years'},
                        5: {'label': '5 years'},
                        6: {'label': '6 years'},
                        7: {'label': '7 years'},
                        8: {'label': '8 years'},
                        9: {'label': '9 years'},
                        10: {'label': '10 years'}
                    }),
        dcc.Graph(id='bar-chart'),
        dcc.Store(id='intermediate-value')
    ]
)

Slider 部分並沒有真正使用，因為我被卡住了，但可以肯定的是我向你們展示了所有內容。 在這部分之后， callback部分，我想使用這些輸入來操作給定的 dataframe。在此之前，我對所有這一切的靈感都在這里：>https://dash.plotly.com/sharing-data-between-callbacks

@app.callback(
    [Output('intermediate-value', 'data')],
#     [Output(component_id="bar-chart", component_property="figure")],
    [Input("input1", "value"),
    Input("input11", "value"),
    Input("input2", "value"),
    Input("input22", "value"),
    Input("input3", "value"),
    Input("input33", "value"),
    Input('my_slider', 'value')]
)
def get_output(input1, input11, input2, input22, input3, input33, my_slider):
    global dff  
    user_adapt_perc= [0.025, 0.135, 0.34, 0.34, 0.16]
    
    first_positions = df.shape[0] * input11
    first_money= df.iloc[:int(first_positions ),]['count'].sum() * input1 * 12

    second_positions = df.shape[0] * (input22)
    second_money= df.iloc[int(first_positions):int(second_positions ),]['count'].sum() * input2 * 12

    third_positions = df.shape[0] * (input33)
    third_money = df.iloc[int(second_positions ):int(third_positions ),]['count'].sum() * input3 * 12

    total_money = first_money + second_money + third_money
    
    dff = pd.DataFrame({"year":[1,2,3,4,5], "cash":list(np.cumsum(user_adapt_perc) * all_money) - total_money })
    
    return dff.to_dict() 

變量all_money是在整個 Dash 應用程序之前預先計算的東西，比方說 10 000 000。而df只是一些用於計算重要部分的輸入數字的 dataframe。 我必須返回 DataFrame 以外的東西，因為它不受支持。

在這部分之后，所有這些計算都是正確的，我正在嘗試 plot 基於這些計算的條形圖：

@app.callback(Output(component_id="bar-chart", component_property="figure"), Input('intermediate-value', 'data'))
def get_figure(dictionary_data):
    dff2 = pd.DataFrame(dictionary_data)
    barchart = px.bar(
        data_frame=dff2,
        x="rok",
        y="uspora",
        opacity=0.9,
        barmode='group')
    
    return barchart

當我輸入所有內容時，出現錯誤：

dash._grouping.SchemaTypeValidationError: Schema: [<Output `intermediate-value.data`>]
Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'dict'>:

我想這甚至在條形圖之前就有了一些東西。 我也試圖添加到 output 部分bar-chart ，但我從來沒有達到這一點。

有什么幫助嗎？ 非常感激。

你能提示我/幫助我嗎？

Answer 1

嘗試改變你所擁有的：

return dff.to_dict() 

對此：

return dff.to_dict(orient='records')