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

Question

我正在使用内联嵌入向我的网页添加散景图。我想在从不同设备查看时调整它的大小，例如手机、平板电脑等，但不知道如何操作。

在我的 HTML 中，我用 class "col-lg-4" 将散景图包裹在 Bootstrap div 中。虽然 div 会根据屏幕尺寸进行相应调整，但散景图最终会水平溢出到 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)

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

Answer 2

除了，您还可以使用 sizing_mode='stretch_both'，以防您希望图形自动适合其容器 window。

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

How to automatically adjust Bokeh plot size to the screen size of device used

size

python-2.7

twitter-bootstrap

bokeh

display