如何限制Plotly导出HTML中包裹图表的div尺寸与图表匹配？

你遇到的问题是Plotly默认布局会为三元图保留大量冗余边距，导致外层Div远大于实际图表区域。可以通过调整布局参数和输出配置来解决：

解决方案 #

通过以下几个步骤约束Div尺寸与图表实际大小接近：

1. 移除布局边距：设置layout的margin参数，将上下左右边距设为极小值
2. 固定图表宽高：显式指定图表的width和height，匹配三元图的实际显示范围
3. 隐藏多余控件：在导出HTML时关闭模式栏，避免额外空间占用

修改后的代码 #

import plotly.graph_objects as go
fig = go.Figure()

# 关键修改：添加margin、width、height参数，调整三元轴domain（可选）
fig.update_layout(
    ternary_sum=100, 
    showlegend=False, 
    ternary_aaxis_linecolor='black', 
    ternary_aaxis_linewidth=2.5,
    ternary_baxis_linecolor='black', 
    ternary_baxis_linewidth=2.5, 
    ternary_caxis_linecolor='black',
    ternary_caxis_linewidth=2.5,
    # 移除所有边距
    margin=dict(l=0, r=0, t=0, b=0),
    # 设置图表固定宽高，可根据需求调整
    width=600,
    height=600,
    # 让三元轴占满整个布局空间（可选，进一步压缩空白）
    ternary=dict(
        aaxis=dict(domain=[0, 1]),
        baxis=dict(domain=[0, 1]),
        caxis=dict(domain=[0, 1])
    )
)

fig.add_trace(go.Scatterternary({
    'mode': 'markers',
    'a': [int(round(20,0))],
    'b': [int(round(50,0))],
    'c': [int(round(30,0))],
    'opacity': 1,
    'marker': {'color': '#FFFFFF', 'size': 24, 'line': {'width': 2.2, 'color': 'black'}},
    'visible': True, }))

# 导出HTML时隐藏模式栏，避免额外空间
fig.write_html('test_ternary_plot.html', config={'displayModeBar': False})

效果说明 #

• margin=dict(l=0, r=0, t=0, b=0) 直接消除了图表周围的冗余空白区域
• 固定width和height确保外层Div的尺寸与图表实际显示范围匹配
• 隐藏模式栏避免了顶部控件占用的额外空间

这样生成的HTML嵌入网站后，外层Div的尺寸会与蓝色标注的实际图表范围几乎一致，红色框内的多余区域会被去除。

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