如何自动调整Bokeh图的大小以适应使用设备的屏幕大小

Question

我正在使用内联嵌入将Bokeh图表添加到我的网页中。我希望在不同设备上查看时（例如移动设备、平板电脑等）可以调整其大小，但我不知道该如何做。

在我的HTML中，我已经将Bokeh图表包裹在一个Bootstrap div中，并设置class为“col-lg-4”。虽然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

- maria saz

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。

- Kalimantan

---

啊，是的！这就是我在寻找的，谢谢 :) - maria saz

你知道如何调整图例表的大小吗？目前，在较小的屏幕上查看时，它会覆盖整个图表。 - maria saz

不可以，但是现在你可以把图例放在“绘图区域”之外。 - bigreddot

是的，你可以这样做： p.legend.legend_spacing = 10 //用于间距 p.legend.legend_padding = 50 //用于填充。 - Kalimantan

是的，我认为@bigreddot建议的更好。 - Kalimantan

在Bokeh 0.12.10中，响应参数已被弃用。使用sizing_mode='fixed'代替responsive=False或使用sizing_mode='scale_width'代替responsive=True。 - Alex

Answer 2

除了Kalimantan的回答之外，如果你希望图形自动适应其容器窗口大小，可以使用sizing_mode='stretch_both'。

- Vito Gentile