时间戳

首页 > 解决方案 > 创建 Dash App 时不输出图表

python-3.x - 创建 Dash App 时不输出图表

问题描述

我正在使用默认的“提示”数据集创建一个应用程序。下面是我正在使用的完整代码。但问题是我没有得到输出图，即使在使用app.callback装饰器映射输出之后也是如此。

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

tips = px.data.tips()

#print(tips.head())

col_options = [dict(label=x, value=x) for x in tips.columns]
#dropdown_items = ['x','y','color','facet_col','facet_row']

app = dash.Dash(__name__)

app.layout = html.Div([
        html.H1('Scatter Plot of the Tips Database'),
        html.P('Select X'),
        dcc.Dropdown(id = 'x', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Select Y'),
        dcc.Dropdown(id = 'y', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Color'),
        dcc.Dropdown(id = 'color', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Column'),
        dcc.Dropdown(id = 'facet_col', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Row'),
        dcc.Dropdown(id = 'facet_row', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.Br(),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"}),
    ])


@app.callback([Output("graph", "figure")],
              [Input('x', 'value'),
               Input('y',  'value'),
               Input('color', 'value'),
               Input('facet_col', 'value'),
               Input('facet_row', 'value')]
              )


def plot_scatter(x, y, color, facet_col, facet_row):
    fig = px.scatter( data_frame = tips, x = x, y=y, 
                     color= color, 
                     facet_row=facet_col,
                     facet_col=facet_row) 
    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

我得到的输出如下。 在此处输入图像描述

在此处输入图像描述

标签： python-3.xplotlydata-visualizationplotly-dashpython-decorators

解决方案

当您加载页面时，dash 在这种情况下所做的第一件事是执行回调并查找您在每个 Dropdown 中输入的默认值。此默认值在属性值中设置。由于您将默认值设置为value=''并且这是一个空字符串，因此您将收到错误消息。

ValueError: Value of 'x' is not the name of a column in 'data_frame'. Expected one of ['total_bill', 'tip', 'sex', 'smoker', 'day', 'time', 'size'] but received:

在错误的末尾，冒号之后你看不到东西，但实际上有一些东西，一个空字符串一个白色的sapce。

因此 value 属性不能是空的 stringt value='' 或不是下拉选项中的值的东西。

我建议为每个对图表有意义的下拉菜单设置一个默认值 例如

app.layout = html.Div([
html.H1('Scatter Plot of the Tips Database'),
html.P('Select X'),
dcc.Dropdown(id = 'x', options = col_options, value='total_bill', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Select Y'),
dcc.Dropdown(id = 'y', options = col_options, value='tip', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Color'),
dcc.Dropdown(id = 'color-c', options = col_options, value='sex', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Column'),
dcc.Dropdown(id = 'facet_col', options = col_options, value='smoker', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Row'),
dcc.Dropdown(id = 'facet_row', options = col_options, value='day', placeholder='Please select...',  style = {"width": "50%"}),
html.Br(),
dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"})])

你会得到这张图

图形

我最后的建议是更改下拉 id 'color'，该 id 将来可能会造成一些麻烦，并且很难找到，因为它是浏览器中存在的错误，如您所见，我将其更改为 '颜色-c'。

推荐阅读