Plotly：为X轴刻度点添加自定义标记与交互事件的方案问询

下面是几个实用的方法，能帮你实现类似需求：

1. 用散点图模拟X轴标记 #

这是最灵活的方案，通过添加一个散点轨迹，把标记定位到X轴上方（或下方）的固定位置：

• 步骤：
  • 确定需要标记的X轴时间点列表，比如target_dates = ['2023-01-05', '2023-01-15', '2023-01-25']
  • 设置散点的Y值为图表数据最小值减去一个固定偏移量，确保标记在X轴附近
  • 自定义标记的形状、颜色和大小，还能附加文本说明

示例代码（Python）：

import plotly.express as px
import pandas as pd
import numpy as np

# 生成示例时间序列数据
df = pd.DataFrame({
    'date': pd.date_range(start='2023-01-01', end='2023-01-30'),
    'value': np.random.randn(30).cumsum()
})

# 创建主折线图
fig = px.line(df, x='date', y='value')

# 定义需要标记的时间点和对应数据
mark_dates = ['2023-01-05', '2023-01-15', '2023-01-25']
mark_values = [df[df['date'] == d]['value'].iloc[0] for d in mark_dates]
# 设置Y轴偏移，让标记固定在X轴上方
y_offset = df['value'].min() - 2

# 添加散点标记轨迹
fig.add_scatter(
    x=mark_dates,
    y=[y_offset]*len(mark_dates),
    mode='markers+text',
    text=[f'值: {v:.2f}' for v in mark_values],
    textposition='top center',
    marker=dict(
        symbol='circle',
        size=10,
        color='red'
    ),
    name='关键标记'
)

# 调整Y轴范围，确保标记完全显示
fig.update_yaxes(range=[y_offset-1, df['value'].max()+1])

fig.show()

2. 用注释(Annotations)添加定向标记 #

如果需要给特定点添加带说明的标记，注释功能更适合，能直接在X轴位置添加符号或文本：

• 步骤：
  • 遍历目标时间点，为每个点创建一个注释
  • 用yref='paper'设置相对位置，y=0对应X轴底部，再通过yshift微调位置
  • 自定义注释的字体、符号样式，可选是否显示箭头

示例代码片段：

# 给每个目标日期添加注释
for date, val in zip(mark_dates, mark_values):
    fig.add_annotation(
        x=date,
        y=0,
        yref='paper',
        text=f'● {val:.2f}',
        showarrow=False,
        font=dict(color='darkblue', size=12),
        yshift=-15  # 向下偏移，贴近X轴
    )

3. 自定义X轴刻度标签 #

如果标记只需要对应特定的X轴刻度，可以直接修改这些刻度的标签，加入符号或特殊字符：

• 步骤：
  • 获取原始X轴刻度，筛选出需要标记的时间点
  • 把这些刻度的标签改成带标记的样式（比如加🔴或△）
  • 保持其他刻度标签不变，避免干扰正常阅读

示例代码片段：

# 获取原始X轴刻度
tickvals = fig.layout.xaxis.tickvals
ticktext = []

for val in tickvals:
    current_date = pd.to_datetime(val)
    # 检查是否是需要标记的日期
    if current_date in pd.to_datetime(mark_dates):
        ticktext.append(f'🔴 {current_date.strftime("%Y-%m-%d")}')
    else:
        ticktext.append(current_date.strftime("%Y-%m-%d"))

# 更新X轴刻度
fig.update_xaxes(tickvals=tickvals, ticktext=ticktext)

这些方案都能实现类似附图的效果，你可以根据标记的数量、是否需要显示额外信息来选择最合适的方法。

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