如何处理与图形渲染相关的 Dash (Plotly) Javascript 错误？

Question

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

An object was provided as 'children' instead of a component, string, or number (or list of those). Check the children property that looks something like:

这是完整的错误。我使用 pastebin 来避免向 post 发送垃圾邮件。 https://pastebin.com/XiCkax0T

这是我的代码。我无法确定我在哪里犯了错误，但我认为它在生成图形 im_update_figure 和 ex_update_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)

Answer 1

两个错误

我使用的是 html.Div 而不是 dcc.Graph，后者支持在 Dash 中绘制图表
我使用的是 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)

如何处理与图形渲染相关的 Dash (Plotly) Javascript 错误？

How do I deal with Dash (Plotly) Javascript error related to rendering of the graph?

javascript

python

pandas

plotly

plotly-dash