Центр встроенного участка Bokeh

Как я могу сосредоточиться на встроенном участке Bokeh? Мой css, похоже, не влияет на Bokeh's <div class="plotdiv">. В приведенном ниже минимальном примере я хочу, чтобы график находился в центре желтого контейнера.Центр встроенного участка 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)

** Наполнитель ниже добавляется только задобрить робота системотехники **

робот SE хочет, чтобы я добавить «больше информации», потому что этот вопрос «в основном код.» Эй, робот, вопрос прост, и это только «в основном код», потому что я сделал домашнее задание и постарался облегчить людям помощь.

источник

2016-05-14 bongbang

С Bokeh 0.11.1 меняющимися на выполнение следующих работ для меня:

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

Вопрос заключается в div.bk-plot-wrapper занимает все пространство ограждающей <div>. Но внутренний <table>, который выкладывает сюжет, не делает. Я не эксперт по CSS, но, возможно, кто-то еще может добавить дополнительную информацию.

Две ноты: я не уверен, какая у вас версия Bokeh, .plotdiv не используется некоторое время. Также обратите внимание, что некоторые основополагающие улучшения в макете будут посадкой в 0.12, чтобы сделать Bokeh намного более отвечающим и «webby» по умолчанию, и поэтому вышеуказанный код, вероятно, не будет работать с 0.12 (в частности, <table> уходит).

источник

2016-05-14 11:39:27 bigreddot

Это работает! Большое спасибо. Я тоже использую '0.11.1'. Класс 'plotdiv' присваивается [div, сгенерированному bokeh] (http://bokeh.pydata.org/en/0.11.0/docs/user_guide/embed.html), который должен быть размещен там, где вы находитесь на странице на странице , поэтому я надеялся, что смогу это просто подгонять. Я не был достаточно умен или достаточно терпелив, чтобы узнать об обертке bk-plot внутри этой массивной JS. – bongbang

Спасибо за указание, что, я думаю, что, возможно, потребуется обновить. – bigreddot

Вместо того, чтобы стилизовать 'table' внутри, я использую div' .bk-plot-wrapper' div с 'display: table', который не позволяет захватить всю доступную ширину. Надеемся, что это будет более передовым. – bongbang

Центр встроенного участка Bokeh

ответ

Смежные вопросы