我正在使用内联嵌入将Bokeh图表添加到我的网页中。我希望在不同设备上查看时(例如移动设备、平板电脑等)可以调整其大小,但我不知道该如何做。
在我的HTML中,我已经将Bokeh图表包裹在一个Bootstrap div中,并设置class为“col-lg-4”。虽然div会根据屏幕大小进行相应调整,但Bokeh图表最终会横向溢出div和屏幕视图之外。有没有办法解决这个问题?
以下是我HTML页面中的一段代码片段,其中包含了图表嵌入的内容:
在我的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
sizing_mode='fixed'
代替responsive=False
或使用sizing_mode='scale_width'
代替responsive=True
。 - Alex