Plotly-Dash折线图自定义颜色失效：线条显示白色问题

问题原因 #

Plotly Express 无法直接解析 "hsv(h, s, v)" 格式的字符串颜色值，这导致线条渲染时无法识别颜色，默认显示为白色，但图例和悬停提示的颜色渲染逻辑不同，所以能正常显示。

解决方案 #

将HSV格式的颜色转换为Plotly支持的格式（如十六进制字符串、RGB/RGBA字符串），修改get_color_map函数的返回值格式即可。

步骤1：实现HSV转RGB/十六进制的工具函数 #

import colorsys

def hsv_to_hex(h, s, v):
    # 将HSV值（范围0-1）转换为十六进制颜色字符串
    r, g, b = colorsys.hsv_to_rgb(h, s, v)
    return f"#{int(r*255):02x}{int(g*255):02x}{int(b*255):02x}"

步骤2：修改get_color_map函数 #

确保函数返回的字典值是Plotly可识别的颜色格式，比如调用上面的转换函数：

def get_color_map(columns):
    col_dict = {}
    for idx, col in enumerate(columns):
        # 示例：按列索引生成HSV值（h范围0-1，s=0.8，v=0.9）
        h = idx / len(columns)
        s = 0.8
        v = 0.9
        # 转换为十六进制颜色
        col_dict[col] = hsv_to_hex(h, s, v)
    return col_dict

步骤3：重新生成折线图 #

col_dict = get_color_map(df.columns)
fig = px.line(data_frame=df, x=df.index, y=df.columns, color_discrete_map=col_dict)
fig.show()

替代方案：使用Plotly内置颜色转换工具 #

如果依赖Plotly的颜色处理工具，也可以用plotly.colors.hsv_to_rgb：

from plotly.colors import hsv_to_rgb

def hsv_to_rgb_str(h, s, v):
    rgb = hsv_to_rgb([h, s, v])
    return f"rgb({int(rgb[0]*255)}, {int(rgb[1]*255)}, {int(rgb[2]*255)})"

将此函数集成到get_color_map中，同样能让Plotly正确识别颜色。

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