Plotly如何实现初始空白图表，下拉菜单选全参数后再渲染数据

可以在不引入任何额外依赖的前提下实现该需求，仅需要对现有代码的初始化逻辑和下拉菜单配置做少量调整即可。

核心修改点 #

• 初始化图表时传入空数据的轨迹，同时将初始X/Y轴标题设置为提示文本，实现初始空白效果
• 为三类下拉菜单添加「请选择」占位选项，仅当用户选择了具体的参数项后才会更新对应轴数据/图表类型
• 初始状态下轨迹的x、y值均为空，自然不会渲染任何数据内容

配套test.json文件内容 #

{
"Names": {
    "0": "Alice",
    "1": "Robert",
    "2": "Garry",
    "3": "Nate",
    "4": "Karen",
    "5": "Nick"
},
"Address": {
    "0": "21 Main St",
    "1": "19 Third St",
    "2": "4 Church St",
    "3": "5 High St",
    "4": "9 Elm St",
    "5": "06 Washingtom St"
},
"AreaCode": {
    "0": "777",
    "1": "421",
    "2": "768",
    "3": "345",
    "4": "888",
    "5": "123"
}}

修改后的完整Python代码 #

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


df_data = pd.read_json("test.json")


button_x_list = []
button_y_list = []
button_graphs_list = []

colnames=df_data.keys()

# 给X轴下拉菜单加占位选项
button_x_list.append(
    dict(
        method="update",
        label="请选择X轴",
        visible=True,
        args=[
            {"x": [[]]},
            {"xaxis": {"title": "请选择X轴取值"}},
        ],
    )
)
# 给Y轴下拉菜单加占位选项
button_y_list.append(
    dict(
        method="update",
        label="请选择Y轴",
        visible=True,
        args=[
            {"y": [[]]},
            {"yaxis": {"title": "请选择Y轴取值"}},
        ],
    )
)
# 给图表类型下拉菜单加占位选项
button_graphs_list.append(
    dict(
        args=["type", "scatter"],
        label="请选择图表类型",
        method="restyle"
    )
)

for col in colnames:
    button_x_list.append(
        dict(
            method="update",
            label=col,
            visible=True,
            args=[
                {"x": [df_data[col]]},
                {"xaxis": {"title": col}},
            ],
        )
    )

    button_y_list.append(
        dict(
            method="update",
            label=col,
            visible=True,
            args=[
                {"y": [df_data[col]]},
                {"yaxis": {"title": col}},
            ],
        )
    )


button_graphs_list.append(
    dict(
        args=["type", "line"],
        label="Line",
        method="restyle"
    )
)

button_graphs_list.append(
    dict(
        args=["type", "bar"],
        label="Bar",
        method="restyle"
    )
)

button_graphs_list.append(
    dict(
        args=["type", "scatter"],
        label="Bubble",
        method="restyle"
    )
)

button_x_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_x_list,
    pad={"r": 15, "t": 10},
    x=0.03,
    y=1.08,
)

button_y_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_y_list,
    pad={"r": 15, "t": 10},
    x=0.23,
    y=1.08,
)

button_graphs_dict = dict(
    direction="down",
    showactive=True,
    xanchor="left",
    yanchor="top",
    visible=True,
    buttons=button_graphs_list,
    pad={"r": 15, "t": 10},
    x=0.46,
    y=1.08,
)

annotation_x = dict(
    text="X:",
    showarrow=False,
    x=0,
    y=1.05,
    xanchor="left",
    xref="paper",
    yref="paper",
    align="left",
    yanchor="top",
)
annotation_y = dict(
    text="Y:",
    showarrow=False,
    x=0.2,
    y=1.05,
    xanchor="left",
    xref="paper",
    yref="paper",
    align="left",
    yanchor="top",
)
annotation_graphs = dict(
    text="Graph:",
    showarrow=False,
    x=0.4,
    y=1.05,
    xanchor="left",
    xref="paper",
    yref="paper",
    align="left",
    yanchor="top",
)


# 初始化空白图表
fig = go.Figure(go.Scatter(x=[], y=[], mode="markers"))
fig.update_layout(
updatemenus=[button_x_dict, button_y_dict, button_graphs_dict], annotations=[annotation_x, annotation_y, annotation_graphs],
title="Plotly Demo",
xaxis={"title":"请选择X轴取值"}, yaxis={"title":"请选择Y轴取值"}
)

fig.show()

效果说明 #

初始加载页面时图表为完全空白状态，三个下拉菜单默认显示占位提示文本，只有当用户依次选择了X轴取值、Y轴取值、图表类型三个参数后，才会渲染对应的数据图表。如果有任意一个参数未选择（仍为占位选项），图表保持空白。

内容的提问来源于stack exchange，提问作者anechkayf