Wie ein Matplotlib-Plot in einen HTML-Container mit mpld3 und Kolben

Question

platzieren Ich versuche, die MPLD3-Kolben-Beispiel (https://github.com/nipunreddevil/mpld3-flask) als Vorlage zu verwenden, um ein bestimmtes Verhalten zu erreichen. Was ich möchte, ist das Hinzufügen von Links in der Kopfzeile zu verschiedenen Plots, anstatt ein Radioknopf-Abfrageformular zu haben.

Derzeit erstellt der obige Beispielcode in templates/index.html einen Container und füllt ihn dann mit einem Plot, wenn der Benutzer eine Abfrage sendet, indem er auf die Schaltfläche "Plot anzeigen" klickt. Das geschieht in diesem Code, soweit ich das beurteilen kann, in index.html:

$("#query").click(function() { 

    $("#loading-div-background").show(); 
    $("#container").hide(); 
    var plot_type = $('input:radio[name=plot_type]:checked').val(); 
    var qu = {"plot_type":plot_type} 
    $.ajax({ 
    type: "POST", 
    async:true, 
    contentType: "application/json; charset=utf-8", 
    url: "/query", 
    data: JSON.stringify(qu), 
    success: function (data) {  
    var graph = $("#container"); 
    graph.html(data); 
    $("#loading-div-background").hide();  
    $("#container").show(); 
    }, 
    dataType: "html" 
}); 
}); 

Was würde ich stattdessen möchte, ist die Kopfleiste hinzuzufügen, die derzeit „Home“ in ihm hat, und bringt jeden Beispiel Plot in einer anderen Seite. Ich würde zu einem anderen Link routen und dann den Template-HTML-Code mit den Daten für das Diagramm füllen, ohne eine Benutzerabfrage zu benötigen.

Ich bin ein bisschen ein Anfänger mit HTML und im Wesentlichen nichts über JavaScript an dieser Stelle. Mein Sinn hier ist, dass es eine relativ einfache Möglichkeit gibt, Flask + Jinja2 zu verwenden, aber ich konnte es nicht herausfinden.

Ich habe einige Probleme mit der Art von unklaren Namespaces, die sich aus der Kombination all dieser Sprachen ergeben. Ich bin normalerweise sehr streng mit Namespaces in meiner eigenen Python-Programmierung (d. H. Ich benutze nie 'von ____ Import *'), so dass dies mich ein bisschen verrückt macht.

Answer 1

Nachdem ich eine Weile gearbeitet habe, habe ich eine Lösung gefunden, die zu funktionieren scheint und das gewünschte Verhalten erreicht. Beachten Sie, dass ich die Pakete twitter bootstrap css und javascript verwende.

Grundsätzlich mache ich eine Tastengruppe:

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="home"> Option 1 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option2"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option3"> Option 3 
    </label> 

Dann in der Javascript aus dem mpld3-Kolben Beispiel verwende ich:

$('.btn-primary').on('click', function(){ 
    var qu = {"plot_type":$(this).find('input').attr('id')} 
    $(this).addClass('active').siblings().removeClass('active'); 
    $.ajax({ 
    type: "POST", 
    async:true, 
    contentType: "application/json; charset=utf-8", 
    url: "/query", 
    data: JSON.stringify(qu), 
    success: function (data) { 
    var graph = $("#container"); 
    graph.html(data); 
    $("#container").show(); 
    }, 
    dataType: "html" 
    }); 
}); 

Jetzt habe ich ein Radio-Button Bar, wobei der aktive Plot-Button auf "active" gesetzt ist und nur ein Klick auf einen der Buttons benötigt, um ein neues Plot zu zeichnen.

EDIT: Nachdem Sie mehr über Flasche und Jinja2 gelernt haben, ist es auch einfach, die mpld3-generierte HTML zu einer Vorlage zu übergeben, aber es gibt eine leichte gotcha; es sieht so etwas wie diese

In der Rückkehr Ihrer Python-Routing-Funktion:

return render_template('index.html', plot=mpld3_html)

dann in der HTML-Vorlage, die Sie diese HTML mit

{{plot|safe}}

Hoffnung verweisen können, das hilft jemand anderes.