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

Question

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

在我的HTML中,我将Bokeh图包装在带有"col-lg-4"类的Bootstrap div中.当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>

和相应的散景绘图功能:

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

散景图具有响应属性.所以你应该可以做p = figure(width = 700,height = 350,responsive = True)

散景0.12.10或之后 作为@Alex指出.响应参数在Bokeh 0.12.10中已弃用.使用sizing_mode ='fixed'表示responsive = False或sizing_mode ='scale_width'表示responsive = True.

Answer 2

除了Kalimantan 的答案sizing_mode='stretch_both'之外，如果您希望图形自动适合其容器窗口，您还可以使用。