Plotly-Dash：反应迟钝的情节

Posted 2023-02-18

【中文标题】Plotly-Dash：反应迟钝的情节

【英文标题】：Plotly-Dash: Unresponsive Plots

【发布时间】：2021-05-22 18:26:28

【问题描述】：

我的 dash 应用程序中的某些绘图反复出现问题。如下图，某些图表失去了交互能力，包括缩放、点击图例、重置坐标轴等，直到我刷新页面。它只发生在某些地块上，但似乎并不局限于一种类型。我遇到过折线图、堆积条形图和散点图的问题。唯一一致的主题是它们是具有多个图表的破折号应用程序的一部分，这些图表可以通过下拉菜单进行切换。有没有其他人遇到过这个问题并找到了解决方法？谢谢！

编辑： 在继续进行故障排除后，我可以确认此问题似乎与允许用户在图表之间切换的下拉菜单相关联。图表按预期运行，直到用户更改图表然后返回到该图表。每当用户在下拉列表中选择新图表时，都会重新绘制图表，所以我不确定为什么这会始终导致交互性问题。我包含了与这个特定图表和下拉回调相关的代码。

@app.callback(
    [
        Output("performance-tooltip-container", "children"),
        Output("performance-graph-container", "children"),
    ],
    [Input("performance-graph-dropdown", "value"), Input("data-log-store", "data")],
    [State("veh-select-memory", "data")],
    prevent_initial_call=True,
)
def graph_selector(dropdown, processed_df, veh_selection_data):
    # =Update performance graph based on user selection through dropdown, click or radio=

    # Determine which input triggered the callback and its property. Triggered
    # is -1 list so most recent trigger is first in the list.
    ctx = callback_context
    input_id = ctx.triggered[0]["prop_id"].split(".")[0]
    input_id_prop = ctx.triggered[0]["prop_id"].split(".")[1]
    # =Load most recent saved data to construct
    # the perfomance graph if dropdown intializes the callback.=
    veh_id = veh_selection_data["veh_id"]
    clean_date = veh_selection_data["clean_date"]
    [performance_graph, tooltip] = update_performance_graph(
        veh_id, clean_date, dropdown, processed_df
    )

    return [
        dbc.Tooltip(
            tooltip,
            target="performance-tooltip-target",
            placement="right",
        ),
        dcc.Graph(
            id="performance-graph",
            figure=performance_graph,
            style="height": 700,
            config=
                "toImageButtonOptions": 
                    "format": "svg",  # one of png, svg, jpeg, webp
                    "filename": "custom_graph",
                    "height": 700,
                    "width": 1200,
                    "scale": 1,  # Multiply title/legend/axis/canvas sizes by this factor
                ,
                "modeBarButtonsToAdd": [
                    "drawline",
                    "drawopenpath",
                    "drawcircle",
                    "drawrect",
                    "eraseshape",
                ],
                "doubleClickDelay": 500,
            ,
        ),
    ]

def update_performance_graph(veh_id, clean_date, dropdown, processed_df):
    """Show perfomance graph based on dropdown"""
    # =Graph Data Processing=
    # Select column from summary dataframe based on user selection
    row_id = [veh_id + ": " + clean_date.strftime("%Y-%m-%d")]
    selected_summary_data = summary_df.loc[summary_df["id"] == row_id[0]]
    # Strip needed date information for graph titles
    clean_str_date = clean_date.strftime("%m-%d-%Y")

    # ==Prepare summary data for graphs==
    total_miles = selected_summary_data["Mileage"].values[0]
    total_time_hr = selected_summary_data["Total Time (hr)"].values[0]
    h2_consumed = selected_summary_data["H2 Consumed (kg)"].values[0]
    h2_fueled = selected_summary_data["H2 Fueled (kg)"].values[0]
    fuel_economy = selected_summary_data["Fuel Economy (mi/kg)"].values[0]
    avg_moving_speed = selected_summary_data["Average Moving Speed (mph)"].values[0]
    idle_time_hr = selected_summary_data["Idle Time (hr)"].values[0]
    h2_idling = selected_summary_data["H2 Consumed Idling (kg)"].values[0]
    # Rename columns for all graphs
    processed_df.rename(
        columns=
            "hr_since_start": "Elapsed Time (hr)",
            "veh_spd_mph": "Speed (mph)",
            "soc": "SOC (%)",
            "sof": "SOF (%)",
            "distance_driven": "Distance Driven",
            "fc_stack_p": "FCStackP (kW)",
            "tractive_power_kw": "Tractive Power (kW)",
            "aux_power_kw": "Auxiliary Power (kW)",
            "tractive_aux_energy": "Traction and Auxiliary Loads (kWh)",
        ,
        inplace=True,
    )

    # ==Speed binning on the hour==
    spd_processed_df = processed_df.copy()
    bin_cols = ["Speed (mph)", "Elapsed Time (hr)"]
    spd_processed_df[bin_cols] = spd_processed_df[bin_cols].apply(np.floor)

    # =Display Graph Based on Selection=
    if dropdown == perf_graphs[0]:
        # Create line graph with key performance parameters
        performance_graph = px.line(
            processed_df,
            x="Elapsed Time (hr)",
            y=["SOC (%)", "SOF (%)", "Distance Driven", "FCStackP (kW)", "Speed (mph)"],
            title=(
                f"SOC, SOF, Distance, Fuel Cell Power, and Speed vs Time"
                f" (clean_str_date_veh_id)"
            ),
            labels=
                "variable": "Parameter",
            ,
            template=plot_color,
        )
        performance_graph.update_layout(
            font_family="Rockwell",
            hovermode="closest",
            newshape_line_color=newshape_line_color,
            legend=dict(
                traceorder="normal",
                font=dict(size=12, color="black"),
                bgcolor="White",
                bordercolor="Black",
                borderwidth=2,
                x=1.01,
                y=0.2,
                xanchor="left",
            ),
            margin=dict(
                r=250,
            ),
            annotations=[
                dict(
                    x=1.01,
                    y=0.9,
                    xref="paper",
                    yref="paper",
                    xanchor="left",
                    showarrow=False,
                    text=(
                        f"Results:<br>Total Mileage = total_miles miles<br>"
                        "Total Time = "
                        f"total_time_hr hr<br>H2 Consumed ="
                        f" h2_consumed kg"
                        f"<br>H2 Fueled = h2_fueled kg<br>Fuel Economy "
                        f"= fuel_economy mi/kg<br>Average Moving Speed"
                        f" = avg_moving_speed "
                        f"mph<br>Idle Time = idle_time_hr hr<br>H2"
                        " Consumed Idling "
                        f"= h2_idling kg"
                    ),
                    align="left",
                    bordercolor="black",
                    borderwidth=2,
                ),
            ],
        )
        tooltip = graph2_tooltips[0]

    elif dropdown == perf_graphs[1]:
        performance_graph = px.scatter()
        tooltip = graph2_tooltips[1]
    elif dropdown == perf_graphs[2]:
        performance_graph = px.bar()
        tooltip = graph2_tooltips[2]
    elif dropdown == perf_graphs[3]:
        performance_graph = px.bar()
        tooltip = graph2_tooltips[3]

    return [performance_graph, tooltip]

【参考方案1】：

这似乎是一个错误。将 plotly 从 4.9.0 升级到 4.14.3 并将 dash 从 1.13.3 升级到 1.19 解决了这个问题。