2017-07-05 2 views
1

J'essaie d'obtenir un graphique mpld3 dans ma webapp en utilisant Django et MPLD3/Matplotlib. Comme décrit here, il devrait être facile d'obtenir le code HTML de la figure écrite en python.Django Rendu graphique Matplotlib en HTML en utilisant mpld3

Views.py

def figure(request): 

    np.random.seed(9615) 

    N = 100 
    df = pd.DataFrame((.1 * (np.random.random((N, 5)) - .5)).cumsum(0), 
        columns=['a', 'b', 'c', 'd', 'e'],) 

    # plot line + confidence interval 
    fig, ax = plt.subplots() 
    ax.grid(True, alpha=0.3) 

    for key, val in df.iteritems(): 
     l, = ax.plot(val.index, val.values, label=key) 
     ax.fill_between(val.index, 
         val.values * .5, val.values * 1.5, 
         color=l.get_color(), alpha=.4) 
    ax.set_xlabel('x') 
    ax.set_ylabel('y') 
    ax.set_title('Interactive legend', size=20) 

    html_fig = mpld3.fig_to_html(fig,template_type='general') 
    plt.close(fig) 

    return render(request, "dashboard.html", {'active_page' : 'dashboard.html', 'div_figure' : html_fig}) 

dashboard.html

<div id="fig_container"> 
       {{ div_figure }} 
</div> 

AFAIK, le code python se traduit en javascript et doit être exécuté lorsque views.py est rendu dashboard.html , droite? Par conséquent, je reçois le code HTML affiché en tant que texte sur mon tableau de bord.hmtl.

QUESTION: Comment afficher le graphique? Dois-je analyser la chaîne HTML renvoyée par la méthode html_to_fig?

Répondre

0

essayer cela dans le code html

<div id="fig_container"> 
    {{ div_figure|safe }} 
</div> 
+0

Merci! Tout fonctionne bien. Pourriez-vous s'il vous plaît expliquer l'exztension '| safe'? THX. –

+0

ou une référence? tHx –

+0

vous pouvez rechercher des filtres de gabarit django à titre de référence, en toute sécurité pour le rendu html du contenu que vous transmettez. c'est un filtre qui dit à django que le html du contenu peut être rendu en html – Exprator