如何在Plotly时序图中旋转散点标记生成风向箭头？

我想要创建一个展示风况的时序图，用箭头可视化特定时间点的风向（目标效果为带旋转箭头标记的风速时序线）。已知可通过转换datetime索引并固定比例实现该效果，而Plotly 5.13.0的Marker新增了angle属性，因此尝试使用原生datetime索引和散点标记来实现。

发现angle属性似乎只能为每个trace设置一次，因此采用循环方式添加标记，但angle属性完全没有效果——即使设置固定值（如25.0），标记外观也完全一致，请问如何实现散点标记的旋转？

样本数据生成代码 #

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

np.random.seed(seed=13)

idx = pd.date_range("2023-07-11 10:05", "2023-07-11 11:00", freq='5min')
wind_speeds = np.random.random_sample(size=len(idx)) * 3
wind_directions = np.random.randint(0, high=3600, size=len(idx)) / 10.0
df = pd.DataFrame({'datetime': idx, 'V_WIND': wind_speeds, 'DIR_WIND': wind_directions})
df['datetime'] = pd.to_datetime(df.datetime)
df = df.set_index('datetime')

数据样例 #

当前尝试代码 #

def plot_wind(df: pd.DataFrame) -> None:
    fig = px.line(df, y="V_WIND")
    for wind_row in df.iterrows():
        fig.add_trace(
            go.Scatter(
                x=[wind_row[0]],
                y=[wind_row[1]['V_WIND']],
                showlegend=False,
                marker=dict(
                    color='red',
                    size=20,
                    symbol='triangle-down-open',
                    angle=[wind_row[1]['DIR_WIND']],
                )))
    fig.show()


plot_wind(df)

当前输出中标记未发生任何旋转，所有箭头/三角标记方向一致。

解决方案 #

问题根源 #

1. Marker符号不支持旋转：triangle-down-open属于不支持angle属性旋转的符号，Plotly仅对特定符号（如箭头类、部分基础形状）开放旋转功能。
2. 风向角度需适配可视化逻辑：气象中风向指的是风来的方向，而可视化时箭头通常需要指向风去的方向，因此需要将原始风向角度加180度（取模360）。
3. 无需循环添加Trace：单个Scatter Trace即可支持多数据点的独立angle设置，循环添加反而冗余且易出问题。

修正后的代码 #

def plot_wind(df: pd.DataFrame) -> None:
    fig = px.line(df, y="V_WIND")
    
    # 调整风向角度：将风来的方向转为风去的方向（可选，根据需求调整）
    df['VIS_DIR'] = (df['DIR_WIND'] + 180) % 360
    
    # 单个Scatter Trace实现所有旋转标记
    fig.add_trace(
        go.Scatter(
            x=df.index,
            y=df['V_WIND'],
            showlegend=False,
            marker=dict(
                color='red',
                size=20,
                symbol='arrow-bar-up',  # 选择支持旋转的箭头符号
                angle=df['VIS_DIR'].tolist(),  # 直接传入角度数组
            )
        )
    )
    
    fig.update_layout(title="风况时序图（带风向标记）")
    fig.show()


plot_wind(df)

关键说明 #

• 符号选择：优先使用arrow-bar-up、arrow-up、triangle-right等官方文档明确支持angle属性的符号。
• 角度调整：如果你的风向定义是风去的方向，可跳过VIS_DIR的计算步骤。
• 性能优化：单个Trace比循环添加数十个Trace更高效，且Plotly对单Trace的渲染支持更好。

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