Python 中心嵌入波基图_Python_Css_Bokeh

Python 中心嵌入波基图

python css

Python 中心嵌入波基图,python,css,bokeh,Python,Css,Bokeh,如何将嵌入式Bokeh绘图居中？我的css似乎对Bokeh的没有影响。在下面的最小示例中，我希望绘图位于黄色容器的中心 from jinja2 import Template from bokeh.embed import components from bokeh.models import Range1d from bokeh.plotting import figure from bokeh.resources import INLINE from bokeh.util.browser i

如何将嵌入式Bokeh绘图居中？我的css似乎对Bokeh的

没有影响。在下面的最小示例中，我希望绘图位于黄色容器的中心

from jinja2 import Template
from bokeh.embed import components
from bokeh.models import Range1d
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view

x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7]

p1 = figure(plot_width=300, plot_height=300)
p1.scatter(x1, y1, size=12, color="red", alpha=0.5)

script, div = components(p1)

template = Template('''<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>
        {{ js_resources }}
        {{ css_resources }}
        {{ script }}
    <style>
    .wrapper {
        width: 800px;
        background-color: yellow;
        margin: 0 auto;
        }

    .plotdiv {
        margin: 0 auto;
        }
    </style>
    </head>
    <body>
    <div class='wrapper'>
        {{ div }}
    </div>
    </body>
</html>
''')

js_resources = INLINE.render_js()
css_resources = INLINE.render_css()

filename = 'embed_multiple.html'

html = template.render(js_resources=js_resources,
                       css_resources=css_resources,
                       script=script,
                       div=div)

with open(filename, 'w') as f:
    f.write(html)

view(filename)

来自jinja2导入模板的


从bokeh.embed导入组件
从bokeh.models导入范围1d
从bokeh.plotting导入图形
从bokeh.resources内联导入
从bokeh.util.browser导入视图
x1=[0,1,2,3,4,5,6,7,8,9,10]
y1=[0,8,2,4,6,9,5,6,25,28,4,7]
p1=图形（绘图宽度=300，绘图高度=300）
p1.散射（x1，y1，大小=12，颜色=“红色”，α=0.5）
脚本，div=组件（p1）
模板=模板（“”）
博克散点图
{{js_resources}}
{{css_resources}}
{{script}}
.包装纸{
宽度：800px；
背景颜色：黄色；
保证金：0自动；
}
.plotdiv{
保证金：0自动；
}
{{div}}
''')
js_resources=INLINE.render_js（）
css\u resources=INLINE.render\u css（）
文件名='embed_multiple.html'
html=template.render（js_resources=js_resources，
css_resources=css_resources，
脚本=脚本，
div=div）
将open（filename，'w'）作为f：
f、 编写（html）
视图（文件名）

**下面添加的填充物只是为了安抚SE的机器人**

SE的机器人希望我添加“更多细节”，因为这个问题是“大部分代码”。嘿，机器人，这个问题很简单，而且它只是“大部分代码”，因为我做了家庭作业，试图让人们更容易帮助我

Bokeh

0.11.1

为我更改为以下作品：

.bk-plot-wrapper table {
    margin: 0 auto;
}

问题在于

div.bk-plot-wrapper

占用了封装

的所有空间。但是绘制绘图的内部

没有。我不是CSS专家，但也许其他人可以添加更多信息

两个注意事项：我不确定您使用的是哪个版本的Bokeh，

.plotdiv

已经有一段时间没有使用了。另外请注意，一些布局的基础性改进将登陆

0.12

，以使Bokeh在默认情况下更具响应性和“webby”，因此上述代码可能无法使用

0.12

（尤其是

正在消失）

将bokeh图放在这里

它可以工作！非常感谢。我也在使用

0.11.1

。

plotdiv

类被分配给要放置在页面上绘图的位置，所以我希望我可以设置样式。我没有足够的智慧和耐心去了解那个巨大的JS中的bk绘图包装器。感谢你指出这一点，我认为这可能需要更新。我没有在

表

中设置样式，而是使用

显示：表

来设置

.bk绘图包装器

div的样式，这样它就不会占用所有可用的宽度。希望这将更具前瞻性。

<div align="center">put the bokeh plot here</div>