在 Dash 应用程序中 Plotly table 在完全加载之前闪现一个空图表轴

Question

我正在开发一个 Dash 应用程序，它将显示大量 table 数据。但是，由于 table 太大，因此在给定的运行上首次打开应用程序时需要一段时间才能加载；加载时，显示的是空图表轴。

加载时，它看起来像这样：

这看起来很不和谐，因为一旦 table 本身加载，视图就会完全改变。想了想，下面显示的是：

有什么方法可以阻止临时图表出现吗？也许做一些事情，比如用一个临时的“我们稍后会和你在一起！”来代替它。消息类型？

如果有帮助，这是我用来生成上述屏幕截图的代码：

import pandas as pd
import plotly.graph_objects as go
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

d = {
    'A scores': [100, 90, 80, 90],
    'B scores': [95, 85, 75, 95],
    'C scores': [75, 60, 65, 70]
}
df = pd.DataFrame(data=d)

def display_table(min_a_score=0):

    filtered_data = df[df['A scores'] >= min_a_score]

    fig = go.Figure(
        go.Table(
            header=dict(
                values=filtered_data.columns,
                align="left"
            ),
            cells=dict(
                values=[filtered_data[x].tolist() for x in filtered_data],
                align='left'
            )
        )
    )
    return fig

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Slider(
        id='score-slider',
        min=10,
        max=100,
        step=10,
        value=0,
        marks=dict(zip(range(0, 110, 10), [f"{x} marks" for x in range(0, 110, 10)])),
    ),
    dcc.Graph(id="scores-table")
])

@app.callback(
    Output("scores-table", "figure"),
    [Input("score-slider", "value")]
)
def display_filtered_table(min_a_score):
    fig = display_table(min_a_score)
    return fig

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

Answer 1

根据朋友的推荐，我添加了一个 dcc.Loading() 组件来包装 dcc.Graph() 调用。

也就是我换行

dcc.Graph(id="scores-table")

在app.layout位与

dcc.Loading(
    id="loading-1",
    children=[dcc.Graph(id="scores-table")],
    type="circle"
)

这意味着它不是显示空轴，而是显示一个旋转的圆圈，表明正在发生：

Answer 2

可能有一种方法可以控制初始图的显示，但是如果设置一个空图并将其指定为初始图，则不会显示不需要的图。

fig = go.Figure(data=[go.Table(
    header=dict(values=['A Scores', 'B Scores']),
    cells=dict(values=[[],[]])
)])

app.layout = html.Div([...
    dcc.Graph(id="scores-table", figure=fig)
 ])

在 Dash 应用程序中 Plotly table 在完全加载之前闪现一个空图表轴

Plotly table in a Dash app flashes up a empty chart axis before loading fully

python

plotly

plotly-dash