Plotly双Y轴图表首尾点异常连接问题求助

问题分析 #

从截图和代码来看，首尾点错误连接的核心原因有两个：

1. 风向的环形特性未适配线性轴：风向是0-360°的环形数据，当数据出现从高角度（如350°）跳变到低角度（如10°）时，线性Y轴会直接绘制横跨整个轴的连线，视觉上像是首尾相连。
2. 不合理的Y轴刻度同步：你在yaxis2中设置了tickmode="sync"，强制两个Y轴刻度数量同步，但风速（0-10m/s）和风向（0-360°）的数值范围差异极大，这个参数会干扰渲染逻辑，引发异常连线。

解决方案 #

1. 移除无效的刻度同步参数

直接删除yaxis2配置中的tickmode="sync"，让两个Y轴根据自身数据范围独立生成合理刻度。

2. 预处理风向数据，消除环形跳变

对风向数据做调整，当相邻点的风向差值超过180°时，自动修正数值，让连线保持平滑：

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots

# 读取数据
df = pd.read_csv('data.csv', index_col=0, parse_dates=True)

# 预处理风向数据，消除环形跳变
def adjust_wind_direction(direcao):
    adjusted = direcao.copy()
    for i in range(1, len(adjusted)):
        diff = adjusted[i] - adjusted[i-1]
        if diff > 180:
            adjusted[i] -= 360
        elif diff < -180:
            adjusted[i] += 360
    return adjusted

df['direcao_vento_adjusted'] = adjust_wind_direction(df['direcao_vento'])

def plot_var_prev(dff):
    fig = make_subplots(specs=[[{"secondary_y": True}]])
    
    # 添加风速曲线
    fig.add_trace(
        go.Scatter(x=dff.index, 
                   y=dff['mag_vento'].values,
                   name="Magnitude"),
        secondary_y=False,
    )
    
    # 添加预处理后的风向曲线
    fig.add_trace(
        go.Scatter(x=dff.index, 
                   y=dff['direcao_vento_adjusted'].values, 
                   name="Direção"),
        secondary_y=True,
    )
    
    # X轴配置
    fig.update_xaxes(title_text="<b>Data</b>")
    
    # 基础布局配置
    fig.update_layout(
        hovermode="x", 
        hoverlabel=dict(font_size=16, font_family="Poppins"),
        plot_bgcolor='rgba(0, 0, 0, 0)', 
        paper_bgcolor='rgba(0, 0, 0, 0)',
        legend=dict(orientation="v")
    )
    
    # Y轴配置（移除tickmode="sync"，手动设置风向轴刻度）
    fig.update_layout(
        yaxis=dict(
            title=dict(text='<b>Magnitude do vento [m/s]</b>'),
            side="left",
            type='linear'
        ),
        yaxis2=dict(
            title=dict(text="<b>Direção do vento [°]</b>"),
            side="right",
            type='linear',
            overlaying="y",
            rangemode='tozero',
            # 手动设置刻度，确保显示0-360°的常规标识
            tickvals=[0, 90, 180, 270, 360],
            ticktext=[0, 90, 180, 270, 0]
        ),
    )
    
    return fig

# 生成并展示图表
fig = plot_var_prev(df)
fig.show()

说明 #

• 预处理后的风向数据会用超过360°或低于0°的数值保持连线平滑，但通过tickvals和ticktext设置，显示的仍然是0-360°的常规风向刻度。
• 移除tickmode="sync"后，两个Y轴的渲染逻辑独立，不会再出现异常的首尾连线。

内容的提问来源于stack exchange，提问作者jose paulo Oliveira