如何在 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

精华：

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

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>)

查看一些可用于你的图形的模板

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

和 与 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)

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

How to not show default dcc.graph template in Dash?

python

plotly

plotly-dash

应用布局

回调和方法

精华：

详情：

完整代码：