2014-04-10 41 views
7

Ich habe das mpld3 Paket als brilliant zum Exportieren eines matplolib Plots in HTML gefunden und dies über eine flask App angezeigt.Mehrere mpld3-Exporte auf einer einzelnen HTML-Seite anzeigen

Jeder Export enthält eine Menge JS, was unnötige Duplizierung zu sein scheint, wenn mehrere Plots auf einer Seite angezeigt werden sollen. Allerdings bin ich nicht gut genug in JS, um die relevanten Komponenten zu extrahieren und dann durch sie zu durchlaufen. Die .fig_to_dict Methode gibt das notwendige JSON um jedes Diagramm anzuzeigen, aber dann frage ich mich, was JS/Template Arbeit benötigt um jedes Diagramm der Reihe nach anzuzeigen.

Ich überlegte, nur jede Handlung in eine einzige große Zahl zu stapeln, aber ich würde gerne die Diagramme in separaten DIVs gestalten und so ist dies nicht die richtige Lösung.

Ich denke, ich kann sehen, was der JS tut, um sie anzuzeigen, aber ich habe nicht genug Wissen, um die Funktionen für den Zweck zu ändern.

Ich habe den Code nicht enthalten, da ich erwarte, dass dies nur für jemanden mit mpld3 Erfahrung relevant ist, aber bei Bedarf einen Beispielcode liefern kann.

Beispiel HTML-Ausgabe für mpld3.fig_to_html(fig, template_type="simple"):

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script> 
<style> 
</style> 
<div id="fig136845463888164451663379"></div> 
<script type="text/javascript"> 
    var spec136845463888164451663379 = { <snip JSON code> }; 
    var fig136845463888164451663379 = mpld3.draw_figure("fig136845463888164451663379", spec136845463888164451663379); 
</script> 

würde ich dachte, dass es als Verbindung der beiden Kern-Skripte aus dem Template-Header so einfach sein würde, und dann ein neues Skript für jeden JSON Export zu schaffen. Aber das hat nicht für mich funktioniert.

Antwort

10

Sie sind auf halbem Weg mit Ihrer Antwort. Ich denke, was wollen Sie tun so etwas wie dieses, die drei Zahlen auf der Seite einbetten:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script> 
<style> 
</style> 
<div id="fig01"></div> 
<div id="fig02"></div> 
<div id="fig03"></div> 
<script type="text/javascript"> 
    var json01 = { <snip JSON code> }; 
    var json02 = { <snip JSON code> }; 
    var json03 = { <snip JSON code> }; 
    mpld3.draw_figure("fig01", json01); 
    mpld3.draw_figure("fig02", json02); 
    mpld3.draw_figure("fig03", json03); 
</script> 

Der json Code für jede Figur kann durch Ausführen

import json 

# ... create matplotlib figure 

json01 = json.dumps(mpld3.fig_to_dict(fig)) 

einbetten in Python erstellt werden Zeichenfolge an der entsprechenden Stelle in dem HTML-Dokument, das Sie erstellen, und Sie sollten gut gehen. Ich hoffe das hilft!

+0

Danke @jakevdp - Ich werde dieses Wochenende testen und als beantwortet markieren, sobald alles läuft. –

+0

@PhilSheard Ich sehe, es war ein langes Wochenende :) Vor allem, da Ihr Problem hier auch gelöst wurde https://github.com/jakevdp/mpld3/issues/128 – Ajasja

+0

@Ajasja Haha, ja es war ein laaaange Wochenende :) Gut Stelle. Sie haben vergessen, eine Schleife zurückzulegen und dies als beantwortet zu markieren. Vielen Dank. –

3

Beachten Sie, dass, seit jakevdps Antwort gepostet wurde, mpld3 eine neue Version hatte. Ab heute (September 2014) muss das mpld3-Include sein:

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script> 
Verwandte Themen