2014-03-12 9 views
12

Ich versuche, ein Bokeh-Plot statisch in eine persönliche Website einzubetten, und stoße auf ein Verhalten, das ich nicht verstehe. Grundsätzlich erzeuge ich ein Grundstück mit Bokeh wie folgt:Ein Plot in eine Website mit Python/Bokeh einbetten

import bokeh.plotting as bplt 
import numpy as np 

x=np.random.random(100) 
y=np.random.random(100) 

bplt.output_file("t.html") 
plot=bplt.line(x,y) 

##the following line refers to the bokeh installed on my home computer 
print plot.create_html_snippet(
      static_path='/usr/local/lib/python2.7/site-packages/bokeh/server/static/') 

##the following line refers to the bokeh installed on my remote computer 
#print plot.create_html_snippet(
#   static_path='/opt/anaconda/lib/python2.7/site-packages/bokeh/server/static/') 

So weit so gut. Dies erzeugt eine Datei, die wie (random garbage).embed.js und ein druckt String mit HTML-Syntax, die ich manuell kopieren in eine HTML-Datei sieht ich testembed.html nenne, die ich im Folgenden wiedergegeben haben:

<html> 
<body> 

<h2>Simple Embed Example</h2> 
<p>This is where my plot should be:</p> 
<p> 
<!--The next 4 lines are the output of the print statement from the python code--> 
<script src="ccbd451a-6995-4dd2-b99c-e4140b362997.embed.js" 
     bokeh_plottype="embeddata" 
     bokeh_modelid="ccbd451a-6995-4dd2-b99c-e4140b362997" 
     bokeh_modeltype="Plot" async="true"></script> 
</p> 

</body> 
</html> 

Wenn ich die Python-Code Referenz habe meine local Python Installation und kopieren Sie die generierten Dateien (.html und .embed.js) auf meinem lokalen Computer, ich kann die Handlung in der HTML-Datei zu sehen.

Allerdings, was ich wirklich tun möchte, ist dies auf einem Remote-Computer ausgeführt werden, und haben Sie die HTML-Datei über das Web auf meiner persönlichen Website zugänglich.

Wenn ich static_path beziehen sich auf meinen Remote Python Computer installieren (wie oben, auf Kommentar gezeigt), I die Handlung in der HTML-Seite nicht sehen kann, wenn ich es über das Web zugreifen (dh gehen zu http://mywebsite.com/testembed.html). Ich habe keine Ahnung, warum das passiert.

als Referenz, hier ist der Code, in dem die HTML-Schnipsel Funktion definiert ist: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/objects.py#L309 und ich beachten Sie, dass eine Option Ich bin nicht in create_html_snippet vorbei, dh embed_base_url, die könnte etwas zu tun haben mit diesem.

Vielen Dank im Voraus! Mike

EDIT Ich nahm bigreddot ‚s Beratung, die das Problem gelöst. Das eigentliche Problem, das ich hatte, war, dass der Webserver, den ich benutzte, aus Sicherheitsgründen nur in der Lage war, auf Dinge in meinem public_html Verzeichnis zuzugreifen. Die Abhilfe war das bokeh/static Verzeichnis in meine public_html und zeigt auf, dass rsync:

rsync -ax /opt/anaconda/lib/python2.7/site-packages/bokeh/server/static/ /home/myusername/public_html/bokeh-static/ 

und dann meinen Code wie folgt ändern:

import bokeh.plotting as bplt 
import numpy as np 

x=np.random.random(100) 
y=np.random.random(100) 

bplt.output_file("t.html") 
plot=bplt.line(x,y) 


#the following line refers to the bokeh rsynced to my directory 
print plot.create_html_snippet(
      static_path='http://www.my_server_website/~myusername/bokeh-static/', 
      embed_base_url = 'http://www.my_server_website/~myusername/where_.js_file_is_located') 

und dann natürlich die erzeugte HTML-Code in die testembed.html kopieren.

Antwort

7

Es klingt, als ob Sie einen "Nicht-Server-Embedded" machen wollen, was bedeutet, dass die Plot-Beschreibung und alle Daten für das Plot in der foo.embed.js-Datei enthalten sind, anstatt von einem "Bokeh-Server" gezogen zu werden. . In diesem Fall möchten Sie embed_base_url auf den Speicherort (auf Ihrem Server) setzen, auf den die Datei embed.js zugreifen kann. Grundsätzlich wirkt sich embed_base_url das src Attribut des Skript-Tag:

In [11]: print plot.create_html_snippet(embed_base_url="/some/location/") 
    <script src="/some/location/c6aa5f66-4136-403f-a307-ce0e2a64f6b4.embed.js"    
      bokeh_plottype="embeddata" 
      bokeh_modelid="c6aa5f66-4136-403f-a307-ce0e2a64f6b4" 
      bokeh_modeltype="Plot" async="true"></script> 

dagegen die static_path teilt dem Plotten Code, in dem (auf dem Server oder CDN, oder wo auch immer) bokeh.js zu finden.

Nur eine Notiz kann dies ein wenig in den kommenden Versionen ändern etwas flexibler zu sein. Im Moment sieht es immer für {{static_root}}/js/bokeh.js

+0

Dank für Ihre Antwort danken, und ich habe versucht, was Sie mit den genannten folgender code: 'print plot.create_html_snippet (statischer_pfad = '/ opt/anaconda/lib/python2.7/site-packages/bokeh/server/statisch /', embed_base_url = '/ home/myusername/public_html/directory_where_js_file_lives /') ' (und kopierte die Ausgabe in meine HTML-Datei) ohne Erfolg. Ich habe auch versucht, die richtige Web-URL (dh http: //www.mywebsite.etc/~me/path/to/js), aber das hat es auch nicht behoben. – Mike

+1

Versehen Sie die HTML-Seite mit einem Webserver? Dann muss der statische Pfad ein URL-Pfad auf dem Server sein, kein Dateisystempfad. Das Gleiche gilt für den 'embed_base_url' – bigreddot

3

embed_base_url steuert den URL-Pfad (es kann absolut oder relativ sein), dass die Javascript in die Datei einbetten suchen.

embed_save_loc steuert das Verzeichnis, dass Python schreiben, die einbetten file in. embed_save_loc ist nicht notwendig, wenn server = True

static_path steuert den URL-Pfad (absolut oder relativ), den das Javascript zum Erstellen von URLs für bokeh.js und bokeh.css verwendet. Die Standardeinstellung lautet http://localhost:5006/static/, könnte aber genauso gut auf ein CDN verweisen.

Navigieren Sie beim Ausführen des Bokeh-Servers zu http://localhost:5006/bokeh/generate_embed/static. Ich denke, das erfordert, dass Sie wegen eines Fehlers auf Master laufen.

EDIT: ein CDN ist ein „Content Delivery Network“ ist es nur eine originelle Bezeichnung für Dateiserver. So veranstalten wir bei http://cdn.pydata.org/bokeh-0.4.2.js (oder http://cdn.pydata.org/bokeh-0.4.2.min.js) für jedermann bokeh.js zu verwenden.

+1

Siehe meinen Kommentar unten @bigreddot, aber es verstand auch nicht genau, wie der Server war relevant; Wie ich es verstehe, betreibe ich keinen Server ... versuche nur, das Javascript statisch einzubetten. Was ist CDN? – Mike

Verwandte Themen