Zentrum eingebettet Bokeh Grundstück

Wie kann ich ein eingebettetes Bokeh-Grundstück zentrieren? Mein CSS scheint keinen Einfluss auf Bokehs <div class="plotdiv"> zu haben. Im unteren Beispiel möchte ich, dass das Diagramm in der Mitte des gelben Containers steht.Zentrum eingebettet Bokeh Grundstück

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)

** Der Füllstoff unten hinzugefügt wird nur SE Roboter zu beschwichtigen **

SE Roboter will mich „Mehr Details“ hinzuzufügen, da diese Frage ist „meistens Code.“ Hey, Roboter, die Frage ist einfach, und es ist nur "meistens Code", weil ich meine Hausaufgaben gemacht habe und versuche, es Leuten leichter zu machen, mir zu helfen.

Quelle

2016-05-14 bongbang

Mit Bokeh 0.11.1 auf die folgenden Werke für mich zu ändern:

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

Das Problem ist, das die div.bk-plot-wrapper den ganzen Raum des umschließenden <div> einnimmt. Aber die interne <table>, die die Handlung legt nicht. Ich bin kein CSS-Experte, aber vielleicht kann jemand anderes mehr Informationen hinzufügen

Zwei Anmerkungen: Ich bin mir nicht sicher, welche Version von Bokeh Sie haben, .plotdiv wurde seit einiger Zeit nicht mehr verwendet. Bitte beachten Sie auch, dass einige grundlegende Verbesserungen des Layouts in 0.12 landen werden, um Bokeh viel repponsiver und "webby" standardmäßig zu machen, und so funktioniert der obige Code wahrscheinlich nicht mit 0.12 (insbesondere verschwindet die <table>).

Quelle

2016-05-14 11:39:27 bigreddot

Es funktioniert! Danke vielmals. Ich benutze auch '0.11.1'. Die 'plotdiv' Klasse wird dem [div generated by bokeh] (http://bokeh.pydata.org/de/0.11.0/docs/user_guide/embed.html) zugewiesen, um dort platziert zu werden, wo Sie die Handlung auf der Seite haben , also hoffte ich, dass ich das einfach stylen könnte. Ich war nicht klug oder geduldig genug, um über den bk-plot-wrapper in diesem massiven JS zu erfahren. – bongbang

Danke, dass Sie darauf hingewiesen haben, ich denke, dass das aktualisiert werden muss. – bigreddot

Statt das 'table' im Inneren zu stylen, style ich das' .bk-plot-wrapper' div mit 'display: table', was verhindert, dass es die gesamte verfügbare Breite einnimmt. Hoffentlich wird das mehr vorwärtskompatibel sein. – bongbang

Zentrum eingebettet Bokeh Grundstück

Antwort

Verwandte Themen