如何修复Flask嵌入Bokeh Server后图表尺寸与独立版不一致问题

Chrome浏览器下，嵌入Flask的Bokeh图表会出现尺寸比独立Bokeh页面小的情况，Firefox则表现正常，这是因为Chrome对嵌入组件的布局计算逻辑不同，通过以下修改可统一尺寸：

具体修改方案（基于官方flask_embed.py示例） #

1. 给嵌入容器添加明确CSS尺寸 #

修改示例中Flask渲染的HTML模板，为图表容器设置和独立页面一致的固定尺寸（或响应式尺寸）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flask Embed</title>
    {{ script|safe }}
    <style>
        /* 设置容器尺寸，和独立Bokeh页面匹配 */
        .bokeh-embed-container {
            width: 800px;
            height: 600px;
            /* 若需响应式可替换为：
            width: 100%;
            height: 80vh;
            */
        }
    </style>
</head>
<body>
    <div class="bokeh-embed-container">
        {{ div|safe }}
    </div>
</body>
</html>

2. 固定Bokeh图表尺寸或开启响应式 #

在创建图表的modify_doc函数中，要么明确设置图表的宽高，要么开启响应式布局以适配容器：

def modify_doc(doc):
    # 方式1：固定尺寸，和容器尺寸匹配
    p = figure(plot_width=800, plot_height=600, title="Flask Embedded Chart")
    
    # 方式2：响应式布局，自动适配容器
    # p = figure(sizing_mode="stretch_both", title="Flask Embedded Chart")
    
    p.circle([1,2,3,4,5], [6,7,2,4,5], size=20, color="navy", alpha=0.5)
    doc.add_root(p)

3. 验证效果 #

重启Flask和Bokeh服务后，Chrome中打开Flask页面，嵌入图表的尺寸会和独立Bokeh页面完全一致；若用响应式设置，调整浏览器窗口时图表也会自动适配。

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