Dash中Plotly热力图如何创建独立共享颜色条？

要解决这个问题，你可以分三步操作：先隐藏每个热力图自带的颜色条，再单独创建仅含颜色条的Plotly图形，最后在Dash布局里将两者组合。

1. 隐藏单个热力图的颜色条 #

用px.imshow生成热力图时，先指定统一的颜色范围（range_color）和配色方案（color_continuous_scale），再通过update_coloraxes(showscale=False)关闭自带的色条：

import plotly.express as px
import numpy as np

# 生成模拟数据（假设所有数据范围统一为0-10）
data1 = np.random.rand(10,10) * 10
data2 = np.random.rand(10,10) * 10

# 创建热力图并隐藏自带色条
fig1 = px.imshow(data1, range_color=[0,10], color_continuous_scale='Viridis')
fig1.update_coloraxes(showscale=False)

fig2 = px.imshow(data2, range_color=[0,10], color_continuous_scale='Viridis')
fig2.update_coloraxes(showscale=False)

2. 创建仅含颜色条的独立图形 #

用plotly.graph_objects.Figure创建空图，通过配置coloraxis参数生成色条，同时隐藏图中所有无关元素（坐标轴、网格等）：

import plotly.graph_objects as go

# 创建独立色条图
colorbar_fig = go.Figure()

# 配置色条核心参数
colorbar_fig.update_layout(
    coloraxis=dict(
        cmin=0,
        cmax=10,  # 和热力图颜色范围保持一致
        colorbar=dict(
            title='数值',  # 色条标题
            thickness=15,  # 色条厚度
            len=0.8,  # 色条长度
            yanchor='middle',
            y=0.5
        ),
        colorscale='Viridis'  # 和热力图配色保持一致
    ),
    # 隐藏所有无关元素
    xaxis=dict(visible=False),
    yaxis=dict(visible=False),
    width=100,  # 色条图宽度，按需调整
    height=400  # 高度匹配热力图，避免布局错位
)

3. 在Dash中组合布局 #

用Dash的布局组件（比如dbc.Row/dbc.Col或原生html.Div）将热力图和独立色条图排列在一起：

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(dcc.Graph(figure=fig1), width=5),
        dbc.Col(dcc.Graph(figure=fig2), width=5),
        dbc.Col(dcc.Graph(figure=colorbar_fig), width=2)
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True)

关键注意事项 #

• 所有热力图的range_color必须和独立色条的cmin/cmax完全一致，否则颜色对应关系会出错
• 色条图的height要和热力图高度匹配，保证布局整齐
• 配色方案color_continuous_scale需全局统一，比如都用'Viridis'、'RdBu'等

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