“错误加载依赖项”：创建一个破折号应用程序，以使用列的任意组合上载csv并呈现图形

Question

我正在尝试使用上传的csv的列来渲染图形。第一个回调正在运行，但是当我添加第二个回调时，浏览器页面显示“错误加载依赖项”。没有任何控制台产生任何错误。有人可以指出我代码中的缺陷，还是可以简单地提出一种使用下拉列表生成图形的方法？

我尝试仅将“选项”返回到下拉列表，而不是整个下拉列表返回div。但这对我也不起作用。我也尝试过在其他浏览器上运行

import dash
import dash_table
import pandas as pd

import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

import numpy as np
import plotly
import plotly.graph_objs as go

import base64
import io


app = dash.Dash(__name__)

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


app.layout = html.Div([html.Div([
html.H5("Upload Files"),
dcc.Upload(id = 'upload-data',
           children = html.Div(['Drag and Drop or',
                                html.A('Select Files')]),
                                style={
                                    'width': '100%',
                                    'height': '60px',
                                    'lineHeight': '60px',
                                    'borderWidth': '1px',
                                    'borderStyle': 'dashed',
                                    'borderRadius': '5px',
                                    'textAlign': 'center',
                                    'margin': '10px'
                                },
                                multiple=False)
]),
html.Div(id = 'output-table'),
html.Div(id = 'x-value', style = {'width' : '48%' , 'display' : 'inline-block'}),

html.Div(id = 'y-value', style = {'width' : '48%' , 'display' : 'inline-block'}),


html.Div(dcc.Graph(id = "first_graph",
                    config={
        'displaylogo': False,
    }))
] , style = {"padding" : 10})

def parse_contents(contents, filename):
    content_type, content_string = contents.split(',')

    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            df = pd.read_excel(io.BytesIO(decoded))

    except Exception as e:
        print(e)
        return None

    return df

@app.callback([Output('output-table', 'children'),
               Output('x-value', 'children'),
               Output('y-value', 'children')],
              [Input('upload-data', 'contents'),
               Input('upload-data', 'filename')])
def update_columns(contents, filename):
    if contents is not None:
        df = parse_contents(contents, filename)
        if df is not None:
            head = df.head()
            return  html.Div([
                    html.Div(id='datatable-output'),
                    dash_table.DataTable(
                    id='datatable',
                    columns =[{"name": i, "id": i} for i in df.columns],
                    data = head.to_dict("rows")
            )
        ]), [dcc.Dropdown(
                 id = 'xaxis',
                 options = [{'label':i , 'value':i} for i in df.columns],
                 #value ='my_x',
                 placeholder = 'Select X-axis value'
        )] , [dcc.Dropdown(
                 id = 'yaxis',
                 options = [{'label':i , 'value':i} for i in df.columns],
                 #value = 'my_y',
                 placeholder = 'Select Y-axis value'
        )]
        else:
            return 'Cannot load the file','',''
    else:
      return '', '', ''



@app.callback(Output('first_graph', 'figure'),
          [Input('xaxis' , 'value'),
          Input('yaxis' , 'value'),
          Input('upload-data', 'contents'),
           Input('upload-data', 'filename')])
def update_graph(my_x , my_y,contents,filename):
    if contents is not None:
        df = parse_contents(contents, filename)
        if df is not None:
            if (my_x is not None) and (my_y is not None):
                return  {'data': [go.Scatter( x = df[my_x],
                                             y = df[my_y],
                                             mode = " lines + markers",
                                             marker = dict(size = 15,
                                                           color = "rgb(54,321,123)",
                                                           symbol = "circle",
                                                           line = dict(width = 2)
                                                          )
                                             )],
                        'layout': go.Layout(title = 'Dashboard',
                                            xaxis = {'title' : my_x},
                                            yaxis = {'title' : my_y},
                                            hovermode = "closest"
                                            )
                                            }
            else:
                return {}
    else:
        return {}