如何为Altair垂直线工具提示标签添加边框与格式设置？

以下是针对需求优化后的完整代码，包含带背景边框的标签、日期与数值格式化功能：

import altair as alt
import numpy as np
import pandas as pd

# 创建月度数据DataFrame
monthly_dates = pd.date_range('1997-09-01', '2022-08-01', freq='M')
monthly_data = pd.DataFrame(
    data={'Date': monthly_dates, 'y_var': np.random.normal(size=len(monthly_dates))}
)

# 创建鼠标悬停选择器，捕捉最近的日期点
nearest = alt.selection(type='single', nearest=True, on='mouseover',
                        fields=['Date'], empty='none')

# 基础折线图
line = alt.Chart(monthly_data).mark_line().encode(
    x='Date:T', 
    y=alt.Y('y_var', title='Y variable')
)

# 透明选择点，用于捕捉鼠标位置
selectors = alt.Chart(monthly_data).mark_point().encode(
    x='Date:T',
    opacity=alt.value(0),
).add_selection(nearest)

# 折线高亮点
points = line.mark_point().encode(
    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
)

# 格式化日期标签（带背景边框）
formatted_date = line.mark_text(
    align='left', dx=5, dy=-15, 
    background='white', padding=3, stroke='#cccccc', strokeWidth=1
).encode(
    text=alt.condition(
        nearest, 
        alt.Text('Date:T', format='%Y-%m'),  # 格式化为YYYY-MM，改为'%b %Y'可得到Oct 2008样式
        alt.value(' ')
    )
)

# 格式化Y值标签（带背景边框，保留2位小数+百分号）
formatted_y = line.mark_text(
    align='left', dx=5, dy=5, 
    background='white', padding=3, stroke='#cccccc', strokeWidth=1
).encode(
    text=alt.condition(nearest, alt.Text('formatted_y:N'), alt.value(' '))
).transform_calculate(
    formatted_y="format(datum.y_var, '.2f') + '%'"  # 保留2位小数，改为'.1f'可保留1位
)

# 垂直线标记
rules = alt.Chart(monthly_data).mark_rule(color='gray').encode(
    x='Date:T',
).transform_filter(nearest)

# 组合所有图层
chart = alt.layer(
    line, selectors, points, rules, formatted_date, formatted_y
).properties(
    width=600, height=300
).interactive()

chart.show()

关键优化说明 #

1. 带背景边框的标签实现 #

通过mark_text的参数配置强化标签可读性：

• background='white'：设置白色背景，避免文本与折线重叠
• padding=3：增加文本内边距，提升视觉舒适度
• stroke='#cccccc'+strokeWidth=1：添加浅灰色边框，明确文本区域范围

2. 日期与数值格式化 #

• 日期格式化：在alt.Text中通过format参数指定输出格式，%Y-%m对应2008-10，%b %Y对应Oct 2008，可按需切换
• Y值格式化：使用transform_calculate调用JavaScript的format函数，.2f控制保留2位小数，拼接%符号完成格式转换；若需1位小数，改为.1f即可

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