使用 Dash for Figure 作為傳遞給 Graph 的無效參數 `figure.layout` 出現錯誤，預期為 `object`。 提供類型`array`

Question

我正在嘗試使用破折號繪制一些數據的代碼，我在想，我做得對。 但不知道為什么會收到一條非常奇怪的消息（情節 3.8.1 和破折號 0.42）

我收到的錯誤消息是：

Invalid argument figure.layout passed into Graph with ID “graph-with-slider”. Expected object. Was supplied type array.

我創建了一個工作正常並提供數據的輸出，問題出在布局和圖形調用中。 我不明白。

 external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
#
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
server = app.server

app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

#
app.layout = html.Div([
        html.Div([
            html.H1('Testing Phase', style = {'text-align': 'center'}),


                html.H5('Enter ID'),
                dcc.Dropdown(
                    id = 'id',
                    style = {'width': '250px'},
                    options = [
                        {'label': 'AA', 'value': 'AA'},
                        {'label': 'AC', 'value': 'AC'},
                        {'label': 'UQ', 'value': 'UQ'},
                        {'label': 'NT', 'value': 'NT'},
                        {'label': 'PQ', 'value': 'PQ'}],
                    value = 'AA'
                ),

                html.H5('Enter Zone Yield Item'),
                dcc.Dropdown(
                    id = 'mz',
                    style = {'width': '200px'},
                    options = [
                        {'label': 'E1', 'value': 'E1'},
                        {'label': 'E2', 'value': 'E2'},
                        {'label': 'E3', 'value': 'E3'},
                        {'label': 'E4', 'value': 'E4'},
                        {'label': 'E5', 'value': 'E5'},
                        {'label': 'E6', 'value': 'E6'}],
                    value = 'E1'
                ),
    

                html.Br(),
                html.Br(),

                html.Button(
                    id = 'submit',
                    n_clicks = 0,
                    children = 'Submit'

                ),

                html.Br(),
                html.Br(),

                   html.Div([

                    dcc.Graph(
                        id='mygraph'
                    ),

                ]),

                html.Br(),
                html.Br(),

            ])
        ])

    ])

@app.callback(Output('mygraph', 'figure'),
                       [Input('submit', 'n_clicks')],
                       [State('pid', 'value'), State('mz', 'value')])])
def update_figure(n_clicks, pid, zone):

        mydf = SomeFuncFunc(id, zone)

        fit_data = mydf[0]

        l_col = fit_data.columns[2]

        z_col = fit_data.columns[3]  

        z2_col = fit_data.columns[4]

        l1_v = str(l_col)
        z1_v = str(z_col)


        print("Starting Trace")

        fits = []

        fits.append(go.Scatter(
            x = fit_data[l_col],
            y = fit_data[z_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "hexagon", "color": "orange",
                'line': {'width': 0.5, 'color': 'white'}
            },
            name = z1_v + "_" + "Plot",
        )),

        fits.append(go.Scatter(
             x = fit_data[l_col],
             y = fit_data[z2_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "diamond-open-dot", "color": "blue",
                'line': {'width': 0.9, 'color': 'red'}
            },
            name = z1_v + "_" + "Fit",
        )),

        mylayout = go.Layout(
             width = 800,
             height = 500,
            xaxis = {'title': 'X axis'},
            yaxis = {'title': 'Y axis'}
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend = {'x': 0, 'y': 1},
            hovermode = 'closest'
        ),
        fig = {'data':  fits, 'layout':mylayout}

        return fig



 if __name__ == '__main__':

      app.run_server(debug = True, port=8053)  #

它應該繪制數據。 如果我不包括布局，它是在繪圖，但並非總是如此。

錯誤詳情：

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)Error: Invalid argument `figure.layout` passed into Graph with ID "graphid".
Expected `object`.
Was supplied type `array`.
   at propTypeErrorHandler (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:40947:5)

   at CheckedComponent (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:37306:9)

   at Td (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:82:9)

   at be (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:91:477)

   at hi (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:104:140)

   at Qg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:144:287)

   at Rg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:145:166)

   at Sc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:158:109)

   at Z (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:156:492)

   at Kc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:155:69)

Answer 1

認為問題是由於布局末尾的逗號導致圖形布局被視為數組而不是對象。 它現在工作正常。