Question

我使用内联嵌入将Bokeh图添加到我的网页。我希望在从不同设备查看时调整其大小，例如手机，平板电脑等，但无法弄清楚如何操作。

在我的HTML中，我已将Bokeh图块包含在一个Bootstrap div中，其中包含类＆＃34; col-lg-4＆＃34;。当div相应地调整屏幕大小时，Bokeh图最终会在div和屏幕视图之外水平溢出。有办法解决这个问题吗？

这是我的HTML页面中的一个片段，其中包含绘图嵌入：

<div class="col-lg-4"><div class="well" style="text-align: center"><p>
{% if script != None %}
{{ div | safe}} 
{% endif %}
</p></div></div>

和相应的Bokeh绘图功能：

def plotreg(beta, alpha, xreturn, yreturn):
    x = np.arange(-0.2, 0.3, 0.01)
    y = alpha + beta*x
    p = figure(width=700,height=350)
    p.line(x, y, line_dash="4 4", line_width=1.5, color='gray')
    p.circle(xreturn, yreturn, fill_color="grey", size=6, hover_fill_color="firebrick",
    fill_alpha=0.05, line_color = "firebrick", hover_alpha=0.3)
    p.xaxis.axis_label = "Market Return"
    p.yaxis.axis_label = "Stock Return"
    p.outline_line_width = 5
    p.outline_line_alpha = 0.3
    p.outline_line_color = "navy"
    comp = components(p)
    return comp

Answer 1

Bokeh图表具有响应属性。所以你应该可以做p = figure（width = 700，height = 350， responsive = True ）

Bokeh 0.12.10或之后 正如@Alex指出的那样。响应参数在Bokeh 0.12.10中已弃用。使用sizing_mode ='fixed'表示responsive = False或sizing_mode ='scale_width'表示responsive = True。

Answer 2

除了Kalimantan's answer，还可以使用sizing_mode='stretch_both'来使图形自动适应其容器窗口。

如何自动将散景图尺寸调整为所用设备的屏幕尺寸

2 个答案: