如何格式化 Plotly xaxis 以 H:M:S 格式显示

Question

我正在尝试创建一个自定义绘图图表，其中有一列表示自开始以来的秒数，而不是以秒为单位显示值，我想将其格式化为 HH:MM:SS格式如下例所示：

但是当我尝试格式化时间列时，它无法按预期工作

因此，如果有人对我如何更改它以正确显示我的 hour:minute 范围有任何参考，我将非常感激

重现示例的数据：

data_dict = [{'variable': 'opt1', 'time_seconds': 62.42, 'values': 1.2506616294386024},
        {'variable': 'opt1', 'time_seconds': 368.64, 'values': 1.026396270065788},
        {'variable': 'opt1', 'time_seconds': 672.04, 'values': 0.9193268790432114},
        {'variable': 'opt1', 'time_seconds': 967.76, 'values': 1.0040146519632747},
        {'variable': 'opt1', 'time_seconds': 1319.24, 'values': 0.9758039569410012},
        {'variable': 'opt1', 'time_seconds': 1621.84, 'values': 0.9608018775714326},
        {'variable': 'opt2', 'time_seconds': 62.42, 'values': 53.669690262026634},
        {'variable': 'opt2', 'time_seconds': 368.64, 'values': 67.29353920559024},
        {'variable': 'opt2', 'time_seconds': 672.04, 'values': 82.30782533848364},
        {'variable': 'opt2', 'time_seconds': 1017.26, 'values': 64.92250125677477},
        {'variable': 'opt2', 'time_seconds': 1319.24, 'values': 61.70492445574225},
        {'variable': 'opt2', 'time_seconds': 1621.84, 'values': 66.73124984237081},
        {'variable': 'opt3', 'time_seconds': 62.34, 'values': 67.07091129789107},
        {'variable': 'opt3', 'time_seconds': 364.74, 'values': 60.39192699523444},
        {'variable': 'opt3', 'time_seconds': 666.68, 'values': 57.13104540996532},
        {'variable': 'opt3', 'time_seconds': 967.76, 'values': 50.293945860615096},
        {'variable': 'opt3', 'time_seconds': 1317.33, 'values': 73.49109300734065},
        {'variable': 'opt3', 'time_seconds': 1619.03, 'values': 80.53859104682748}]

重现图表的代码是：

from plotly.subplots import make_subplots
import plotly.express as px
import pandas as pd
import datetime

table=pd.DataFrame.from_dict(data_dict)

fig = make_subplots(specs=[[{"secondary_y": True}]])
cond1 = table["variable"] == "opt1"
# table["time_seconds"]=[datetime.timedelta(seconds=val) for val in table["time_seconds"]]
    
chart1 = px.scatter(
    table[~cond1],
    x="time_seconds",
    y="values",
    color="variable",
    color_discrete_map={
        "opt1": "#008aff",
        "opt2": "#8c2eff",
        "opt3": "#56cb32",
    },
)
chart_2 = px.scatter(
    table[cond1],
    x="time_seconds",
    y="values",
    color="variable",
    color_discrete_map={
        "opt1": "#008aff",
        "opt2": "#8c2eff",
        "opt3": "#56cb32",
    },
)

for figure in chart1.data:
    fig.add_trace(figure, secondary_y=False)

for figure in chart_2.data:
    fig.add_trace(figure, secondary_y=True)

for figure in fig.data:
    figure.update(mode="markers+lines")

fig.update_yaxes(
    range=[0, 101],
    title="y axis 1",
    secondary_y=False,
)
fig.update_yaxes(
    range=[-1, 2],
    title="y axis 2",
    secondary_y=True,
)
fig.update_layout(
    showlegend=False,
    title_text=None,
    xaxis=dict(
        visible=True,
        tickformat= '%H:%M:%S',
        title_text="<b>Time</b>",
#             tickformat= '%H:%M:%S',
            # tickmode = 'array',
        tickvals = [val for val in table["time_seconds"]],
        ticktext = [str(datetime.timedelta(seconds=val))[:-4] for val in table["time_seconds"]]
    ),
    margin=dict(r=20, l=20, t=35, b=20),
)

fig.update_layout(
    clickmode="event+select",
    height=350,
    showlegend=False,
    font=dict(color="black"),
)

Answer 1

一种简单的方法是将其视为纪元时间并转换为 pandas
已针对次要 y 轴和整体格式对您的代码进行了一些重构，以便能够证明这一点

import pandas as pd
import plotly.express as px

# fmt: off
data_dict = [{'variable': 'opt1', 'time_seconds': 62.42, 'values': 1.2506616294386024},
        {'variable': 'opt1', 'time_seconds': 368.64, 'values': 1.026396270065788},
        {'variable': 'opt1', 'time_seconds': 672.04, 'values': 0.9193268790432114},
        {'variable': 'opt1', 'time_seconds': 967.76, 'values': 1.0040146519632747},
        {'variable': 'opt1', 'time_seconds': 1319.24, 'values': 0.9758039569410012},
        {'variable': 'opt1', 'time_seconds': 1621.84, 'values': 0.9608018775714326},
        {'variable': 'opt2', 'time_seconds': 62.42, 'values': 53.669690262026634},
        {'variable': 'opt2', 'time_seconds': 368.64, 'values': 67.29353920559024},
        {'variable': 'opt2', 'time_seconds': 672.04, 'values': 82.30782533848364},
        {'variable': 'opt2', 'time_seconds': 1017.26, 'values': 64.92250125677477},
        {'variable': 'opt2', 'time_seconds': 1319.24, 'values': 61.70492445574225},
        {'variable': 'opt2', 'time_seconds': 1621.84, 'values': 66.73124984237081},
        {'variable': 'opt3', 'time_seconds': 62.34, 'values': 67.07091129789107},
        {'variable': 'opt3', 'time_seconds': 364.74, 'values': 60.39192699523444},
        {'variable': 'opt3', 'time_seconds': 666.68, 'values': 57.13104540996532},
        {'variable': 'opt3', 'time_seconds': 967.76, 'values': 50.293945860615096},
        {'variable': 'opt3', 'time_seconds': 1317.33, 'values': 73.49109300734065},
        {'variable': 'opt3', 'time_seconds': 1619.03, 'values': 80.53859104682748}]
# fmt: on

table = pd.DataFrame.from_dict(data_dict)

px.scatter(
    table,
    x=pd.to_datetime(table['time_seconds'],unit='s'),
    y="values",
    color="variable",
    hover_data=["time_seconds"],
    color_discrete_map={
        "opt1": "#008aff",
        "opt2": "#8c2eff",
        "opt3": "#56cb32",
    },
).update_traces(mode="lines+markers").for_each_trace(
    lambda t: t.update(yaxis="y2") if t.name == "opt1" else t
).update_layout(
    yaxis2={"overlaying": "y", "side": "right"},
    xaxis_tickformat="%H:%M:%S",
    showlegend=False,
    title_text=None,
)

如何格式化 Plotly xaxis 以 H:M:S 格式显示

How to format Plotly xaxis to be shown in H:M:S format

datetime

plotly

plotly-python

x-axis