如何处理与图形渲染相关的破折号(Plotly)Javascript错误?

如何处理与图形渲染相关的破折号(Plotly)Javascript错误?,javascript,python,pandas,plotly,plotly-dash,Javascript,Python,Pandas,Plotly,Plotly Dash,我正在尝试制作dash应用程序。我是一个初学者(noob:P),第一次尝试应用程序。我编写了以下代码,应用程序运行成功,但我无法获得图形。我得到以下错误 对象以“子对象”的形式提供,而不是组件、字符串或数字(或它们的列表)。检查类似以下内容的children属性: 下面是全部错误。我使用pastebin来避免对帖子进行垃圾邮件。 这是我的密码。我无法确定我在哪里出错,但我认为是在生成图形im\u update\u figure和ex\u update\u figure 这是完整的代码 imp

我正在尝试制作dash应用程序。我是一个初学者(noob:P),第一次尝试应用程序。我编写了以下代码,应用程序运行成功,但我无法获得图形。我得到以下错误

对象以“子对象”的形式提供,而不是组件、字符串或数字(或它们的列表)。检查类似以下内容的children属性:

下面是全部错误。我使用pastebin来避免对帖子进行垃圾邮件。

这是我的密码。我无法确定我在哪里出错,但我认为是在生成图形
im\u update\u figure
ex\u update\u figure

这是完整的代码


import pandas as pd
import numpy as np

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

import plotly.graph_objects as go

ex = pd.read_csv('2018-2010_export.csv')
im = pd.read_csv('2018-2010_import.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Label("Select the year"),
    dcc.Dropdown(
        id='yearInput',
        options=[
            {'label': i, 'value': i} for i in np.unique(ex.year)
        ],
        value=2010
    ),
    html.Div(id='outputGraphExport'),
    html.Div(id='outputGraphImport')
])

app.title = 'India Import Export'


@app.callback(
    Output('outputGraphImport', 'children'),
    [Input('yearInput', 'value')])
def im_update_figure(yearInput):
    df_im = im[im.year == yearInput]
    im_fig = go.Figure(
        [go.Bar(
            x=df_im.groupby('country').sum().sort_values(
                by=['value'], ascending=False).head(7).index,
            y=df_im.groupby('country').sum().sort_values(
                by=['value'], ascending=False).value.head(7),
            text=round(df_im.groupby('country').sum().sort_values(
                by=['value'], ascending=False).value.head(7)),
            textposition='auto')])
    im_fig.update_layout(
        title='Imports of India for the year 2018',
        xaxis=dict(
            title='Top 7 Countries'),
        yaxis=dict(
            title='INR (in Million)'))

    return im_fig


@app.callback(
    Output('outputGraphExport', 'children'),
    [Input('yearInput', 'value')])
def ex_update_figure(yearInput):
    df_ex = ex[ex.year == yearInput]
    ex_fig = go.Figure(
        [go.Bar(
            x=df_ex.groupby('country').sum().sort_values(
                by=['value'], ascending=False).head(7).index,
            y=df_ex.groupby('country').sum().sort_values(
                by=['value'], ascending=False).value.head(7),
            text=round(df_ex.groupby('country').sum().sort_values(
                by=['value'], ascending=False).value.head(7)),
            textposition='auto')])

    ex_fig.update_layout(
        title='Exports of India for the year 2018',
        xaxis=dict(
            title='Top 7 Countries'),
        yaxis=dict(
            title='INR (in Million)'))

    return ex_fig


if __name__ == '__main__':
    app.run_server(debug=True)
两个错误

  • 我使用的是
    html.Div
    而不是
    dcc.Graph
    ,它支持在短划线中绘制图表
  • 我使用的是plotly语法,但实际上必须使用启用JS的语法
  • 这是更新后的代码

    #the dash app for import export
    
    import pandas as pd
    import numpy as np
    
    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output
    
    import plotly.graph_objects as go
    
    ex = pd.read_csv('2018-2010_export.csv')
    im = pd.read_csv('2018-2010_import.csv')
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div([
        dcc.Dropdown(
            id='yearInput',
            options=[
                {'label': i, 'value': i} for i in np.unique(ex.year)
            ],
            value=2010
        ),
        dcc.Graph(id='outputGraphImport'),
        dcc.Graph(id='outputGraphExport')
    ])
    
    app.title = 'India Import Export'
    
    @app.callback(
        Output('outputGraphImport', 'figure'),
        [Input('yearInput', 'value')])
    def im_update_figure(yearInput):
        df_im = im[im.year == yearInput]
        figure = {
            'data': [{
                "x":df_im.groupby('country').sum().sort_values(by=['value'], ascending=False).head(7).index,
                "y":df_im.groupby('country').sum().sort_values(by=['value'], ascending=False).value.head(7),
                "type":'bar',
            }],
            'layout':{
                'title': 'Imports to India for the selected year',
                'xaxis':{
                    'title':'Countries'
                },
                'yaxis':{
                    'title':'INR (Million)'
                }
            }}
        return figure
    
    
    @app.callback(
        Output('outputGraphExport', 'figure'),
        [Input('yearInput', 'value')])
    def ex_update_figure(yearInput):
        df_ex = ex[ex.year == yearInput]
        figure = {
            'data': [{
                "x":df_ex.groupby('country').sum().sort_values(by=['value'], ascending=False).head(7).index,
                "y":df_ex.groupby('country').sum().sort_values(by=['value'], ascending=False).value.head(7),
                "type":'bar',
            }],
            'layout':{
                'title': 'Exports from India for the selected year',
                'xaxis':{
                    'title':'Countries'
                },
                'yaxis':{
                    'title':'INR (Million)'
                }
            }}
        return figure
    
    if __name__ == '__main__':
        app.run_server(debug=True)
    

    你还有问题吗,还是已经解决了?