Jak umieścić wykres matplotlib do pojemnika html przy użyciu mpld3 i kolby

Question

Próbuję użyć szablonu mpld3-kolby (https://github.com/nipunreddevil/mpld3-flask) jako szablonu do osiągnięcia określonego zachowania. Chciałbym dodać linki na pasku nagłówka do różnych działek, zamiast mieć formularz zapytania z przyciskiem radiowym.

W tej chwili przykładowy kod powyżej, w templates/index.html, tworzy kontener, a następnie wypełnia go działką, gdy użytkownik przesyła zapytanie, klikając przycisk "Pokaż działkę". Co dzieje się w tym kodzie, o ile mi wiadomo, w 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" 
}); 
}); 

Chciałbym zamiast jest dodanie do paska nagłówka, który obecnie ma „domu” w nim i wychować każde przykład działka na innej stronie. Będę przekierowywał do innego łącza, a następnie zapełniam szablon kodu html danymi do wydruku, nie wymagając zapytania użytkownika.

Jestem trochę nowicjuszem z html i zasadniczo nic nie wiem o JavaScript w tym momencie. My sens o to, że istnieje dość łatwy sposób użycia kolby + jinja2, aby to zrobić, ale nie byłem w stanie tego rozgryźć.

Mam pewne problemy z niejasnymi przestrzeniami nazw wynikającymi z łączenia wszystkich tych języków. Zwykle jestem bardzo surowy z przestrzeniami nazw w moim własnym programowaniu Pythona (to znaczy, nigdy nie używam "od ____ importu"), więc to doprowadza mnie do szału.

Answer 1

Po krótkiej pracy znalazłem rozwiązanie, które wydaje się działać i osiągnąć pożądane zachowanie. Zauważ, że używam pakietów css i javascript twitter bootstrap.

zasadzie robię grupy przycisków:

<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> 

Następnie w JavaScript z przykładu mpld3 kolby używać:

$('.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" 
    }); 
}); 

Teraz mam radiowy przycisk pasek, przy aktywnym aktualnie przycisku wykresu ustawionym na "aktywny", który wymaga tylko jednego kliknięcia jednego z przycisków, aby narysować nowy wykres.

EDYCJA: Po tym, jak dowiesz się więcej na temat kolb i Jinja2, łatwo jest przekazać HTML-a wygenerowany przez mpld3 do szablonu, ale pojawia się lekkie poruszenie; wygląda to mniej więcej tak

W zamian swojej funkcji routingu Pythona:

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

Następnie w szablonie html można odwoływać się do tego html z

{{plot|safe}}

Hope this helps ktoś inny.