Plotly多图同页实现：如何将2个指标图与分组柱状图置于同一网页

你现在的问题核心是创建了两个完全独立的Figure对象（一个承载指标图，一个承载柱状图），然后分别调用show()方法，自然会弹出两个独立的网页。要把它们整合到同一页面，只需要将所有图表元素放入同一个Figure容器，通过make_subplots规划好布局即可。

修改后的完整代码 #

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

# 假设indicateur、df、kpi_color这些变量已经提前定义
trace1 = go.Indicator(
    mode = "gauge+number",
    number = {'prefix':'KPI: ','suffix': "%", 'font': {'size': 50}},
    value = indicateur,
    title = 'Indicateur d\'usage',
    title_font_size = 50,
    title_font_color = 'black',
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 60], 'color': 'red'},
            {'range': [60, 80], 'color': 'orange'},
            {'range': [80, 90], 'color': 'yellow'},
            {'range': [90,100], 'color': 'green'}],
    })

trace2 = go.Indicator(
    # 这里填入你trace2的原有配置，比如修改value和title适配第二个指标
    mode = "gauge+number",
    number = {'prefix':'KPI: ','suffix': "%", 'font': {'size': 50}},
    value = indicateur, # 替换为你的第二个指标数值
    title = 'Second Indicateur',
    title_font_size = 50,
    title_font_color = 'black',
    gauge = {
        'axis': {'range': [None, 100], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"},
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        'steps': [
            {'range': [0, 60], 'color': 'red'},
            {'range': [60, 80], 'color': 'orange'},
            {'range': [80, 90], 'color': 'yellow'},
            {'range': [90,100], 'color': 'green'}],
    })

# 创建统一的子图布局：2行2列，第二行柱状图跨两列
fig = make_subplots(
    rows=2, cols=2,
    specs=[
        [{'type': 'indicator'}, {'type': 'indicator'}],  # 第一行：两个指标图
        [{'type': 'bar', 'colspan': 2}, None]             # 第二行：柱状图占满整行，None占位
    ],
    subplot_titles=("", "", "Comparaison de taux d'erreur") # 对应三个子图的标题
)

# 添加两个指标图到第一行的对应位置
fig.append_trace(trace1, row=1, col=1)
fig.append_trace(trace2, row=1, col=2)

# 添加柱状图的三个trace到第二行（因为跨列，指定col=1即可）
fig.add_trace(go.Bar(name='beta', x=df['Erreurs'], y=df['% d\'erreur beta']), row=2, col=1)
fig.add_trace(go.Bar(name='prod', x=df['Erreurs'], y=df['% d\'erreur prod']), row=2, col=1)
fig.add_trace(go.Bar(name='delta', x=df['Erreurs'], y=df['prod-beta']), row=2, col=1)

# 调整整体布局样式
fig.update_layout(
    font={'color': kpi_color, 'family': "Arial"},
    plot_bgcolor='rgba(0,0,0,0)',
    height=800, # 可根据需求调整整体高度
    barmode='group' # 保持柱状图的分组显示模式
)

# 仅调用一次show()，所有图表将在同一页面展示
fig.show()

关键修改说明 #

• 统一Figure容器：不再单独创建bar_graph对象，将所有图表trace都整合到同一个fig中
• 布局规划：通过make_subplots的specs参数定义第二行的柱状图跨两列，实现"上两个指标图+下一个柱状图"的布局
• 移除重复的show()：只保留一次fig.show()，避免弹出多个独立页面
• 子图标题适配：通过subplot_titles参数给柱状图设置标题，替代原来单独的title_text配置

修改后，两个指标图会显示在页面上方左右两侧，分组柱状图占据页面下方整行区域，所有内容将在同一个网页中展示。

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