如何在 Dash 中不显示默认的 dcc.graph 模板？

Question

我试图在应用程序运行时不显示默认的 dcc.graph。我只想在应用程序运行时显示我的图表

这是我的代码，

应用程序布局

dbc.Row([
    dbc.Col([
        dcc.Graph(id='datatable-upload-graph', responsive=True, style={
            'display': 'block'
        })
    ], xs=10, sm=8, md=5, lg=6, xl=5)
])

回调和方法

@app.callback(
Output('datatable-upload-graph', 'figure'),
Input('container-datatable', 'data')
)
def display_gantt(container_datatable):
    df = pd.DataFrame(container_datatable)

    df['Start Date'] = pd.to_datetime(df['Start Date'], errors='coerce')
    df['End Date'] = pd.to_datetime(df['End Date'], errors='coerce')

    fig = px.timeline(df, x_start="Start Date", x_end="End Date", y="Project Name", color="Status")
    fig.update_yaxes(autorange="reversed")

    if container_datatable is None:
        return []
    else:
        return fig

app.config['suppress_callback_exceptions'] = True
if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

Answer 1

精华：

只需确保不要保留未指定figure的属性dcc.Graph，而是例如这样：

dcc.Graph(id='datatable-upload-graph', figure = blank_figure())

哪里blank_figure()的图形不仅像默认版本中那样是空的，而且剥夺了所有可见特征。

细节：

在您的应用程序布局中，您已将dcc.Graph设置为：

dcc.Graph(id='datatable-upload-graph', responsive=True, style={
    'display': 'block'
})

这里缺少的是figure属性的规范。如果没有它，您的应用程序将运行得很好，但您最终会得到那个空图形，直到您成功通过回调之一填充图形对象。如果加载时间较长，空图形将变得可见。

但是您可以通过指定一个完全空白的数字来解决这个问题，例如：

dcc.Graph(id='datatable-upload-graph', figure = blank_figure())

这是哪里blank_figure()：

def blank_fig():
    fig = go.Figure(go.Scatter(x=[], y = []))
    fig.update_layout(template = None)
    fig.update_xaxes(showgrid = False, showticklabels = False, zeroline=False)
    fig.update_yaxes(showgrid = False, showticklabels = False, zeroline=False)
    
    return fig

下面的代码片段将让您使用随机数据样本进行测试。该应用程序本身也非常简洁（非常谦虚）。没什么太花哨的，但它可以让您通过以下方式查看一些可用于您的图形的模板fig.update_layout(template = <template>)

如果不包含figure = blank_figure()in dcc.Graph，应用程序将暂时如下所示：

该应用程序figure = blank_figure()将如下所示：

当模拟结束时，应用程序将如下所示：

现在您可以轻松地查看使用不同模板的图形的外观，例如'plotly_dark'：

只需在注释掉这两行之间切换即可查看下面完整代码片段中的效果。

dcc.Graph(id="graph", figure = blank_fig())
# dcc.Graph(id="graph")

完整代码：

import numpy as np
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

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


templates = ['plotly', 'seaborn', 'simple_white', 'ggplot2',
             'plotly_white', 'plotly_dark', 'presentation', 'xgridoff',
             'ygridoff', 'gridon', 'none']

def blank_fig():
    fig = go.Figure(go.Scatter(x=[], y = []))
    fig.update_layout(template = None)
    fig.update_xaxes(showgrid = False, showticklabels = False, zeroline=False)
    fig.update_yaxes(showgrid = False, showticklabels = False, zeroline=False)
    
    return fig

# startfig = blank_fig()

# Dash
app = JupyterDash(__name__)
app.layout = html.Div([
                        dcc.RadioItems(
                            id='template_radio',
                            options=[{'label': k, 'value': k} for k in templates],
                            value=templates[0]
                        ),

                        html.Hr(),
                        html.Div(id='display_templates'),
                        dcc.Graph(id="graph", figure = blank_fig())
#                         dcc.Graph(id="graph")

])

# Make a figure with selected template
@app.callback(Output('graph', 'figure'),
             [Input('template_radio', 'value')])
def make_graph(template):
    np.random.seed(1)
    start = 2021
    ncols = 50
    nrows = 100
    cols = [str(i) for i in np.arange(start, start+ncols)]
    df = pd.DataFrame(np.random.randint(-2,3, (nrows,ncols)), columns = cols).cumsum()
    df.iloc[0] = 0

    # figure
    fig = px.line(df, x=df.index, y=cols)
    fig.update_layout(template = template)

    return fig

app.run_server(mode='inline', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)