Plotly自定义模板与plotly_white叠加致热力图色标丢失及悬停字体问题

1. 模板叠加后热力图色标丢失 #

使用Python Plotly自定义模板，希望与plotly_white模板叠加使用，但叠加后热力图的色标颜色消失，单独使用自定义模板时色标可正常显示目标颜色。

自定义模板代码：

THEME = {
    'background_color': '#ffffff',
    'font_family': 'Roboto',
    'accent_font_family': 'Roboto Slab',
    'dark_color': '#2A2B2E',
    'pale_color': '#DFD9E2',
    'line_chart_color': 'black',
    'label_font_size': 14,
    'label_background_color': '#ffffff',
    'colorscale': 'Bluyl'
}
def create_custom_theme():
    pio.templates['mytemplate'] = go.layout.Template(
        layout=go.Layout(
            font=dict(
                family=THEME['font_family']+' , '+ THEME['accent_font_family'],
                color=THEME['dark_color']
            ),
            paper_bgcolor=THEME['background_color'],
            plot_bgcolor=THEME['background_color'],
            hoverlabel=dict(
                bgcolor=THEME['label_background_color'],
                font=dict(
                    size=THEME['label_font_size']
                )
            ),
            hovermode="closest",
            newshape=dict(
                line_color=THEME['line_chart_color']
            ),
            colorscale=dict(diverging=THEME['colorscale']), 
            xaxis=dict(
                tickangle=-45
            )
        )
    )

默认模板设置代码：

def set_default_theme():
    pio.templates.default='mytemplate+plotly_white'

2. Hover模板中使用模板定义的两种字体 #

目前只能通过<span>标签硬编码字体，想了解是否可以直接使用模板内定义的font_family和accent_font_family，当前实现代码：

def get_heatmap_hover_template():
    return ('<span style="font-family: Roboto Slab"><b>Neighborhood : </b></span>%{y}'
            +'<br><span style="font-family: Roboto Slab"><b>Year : </b></span>%{x}</br>'
            +'<span style="font-family: Roboto Slab"><b>Trees planted : </b></span>%{z}<extra></extra>')

1. 修复色标丢失问题 #

问题根源有两点：

• 热力图默认使用**sequential（连续型）**色标，但你自定义模板中只配置了diverging（发散型）色标；
• 模板叠加规则为后加载的模板会覆盖先加载模板的同名配置，原代码中plotly_white在后面，直接覆盖了自定义模板的色标设置。

修改方案：

def create_custom_theme():
    pio.templates['mytemplate'] = go.layout.Template(
        layout=go.Layout(
            # 保留原有配置
            font=dict(
                family=THEME['font_family']+' , '+ THEME['accent_font_family'],
                color=THEME['dark_color']
            ),
            paper_bgcolor=THEME['background_color'],
            plot_bgcolor=THEME['background_color'],
            hoverlabel=dict(
                bgcolor=THEME['label_background_color'],
                font=dict(
                    size=THEME['label_font_size']
                )
            ),
            hovermode="closest",
            newshape=dict(
                line_color=THEME['line_chart_color']
            ),
            # 同时配置连续型和发散型色标，适配不同图表类型
            colorscale=dict(
                sequential=THEME['colorscale'],
                diverging=THEME['colorscale']
            ), 
            xaxis=dict(
                tickangle=-45
            )
        )
    )

def set_default_theme():
    # 调整叠加顺序，让自定义模板覆盖plotly_white的配置
    pio.templates.default='plotly_white+mytemplate'

如果仅需适配热力图，也可以只配置sequential类型色标：

colorscale=dict(sequential=THEME['colorscale'])

2. Hover模板使用模板字体的简化方法 #

Plotly的hovertemplate无法直接引用模板变量，但可以通过读取THEME字典动态生成模板，避免硬编码：

def get_heatmap_hover_template():
    accent_font = THEME['accent_font_family']
    return (f'<span style="font-family: {accent_font}"><b>Neighborhood : </b></span>%{{y}}'
            f'<br><span style="font-family: {accent_font}"><b>Year : </b></span>%{{x}}</br>'
            f'<span style="font-family: {accent_font}"><b>Trees planted : </b></span>%{{z}}<extra></extra>')

另外，可以在自定义模板中设置hoverlabel的默认字体，减少hovertemplate中的标签嵌套：

hoverlabel=dict(
    bgcolor=THEME['label_background_color'],
    font=dict(
        size=THEME['label_font_size'],
        family=THEME['font_family']  # 设置hover默认字体
    )
),

这样仅需给需要特殊字体的部分（如加粗标签）设置accent_font_family即可。

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