Come creare grafici con Plotly su Django?

Question

Sto provando a creare una dashboard in cui posso analizzare i dati del mio modello (articolo) usando la libreria plotly.

Il grafico a barre Plotly non è visualizzato sul mio modello, mi chiedo se sto facendo qualcosa di sbagliato in quanto non c'è nessun errore con il codice qui sotto:

models.py

from django.db import models 
from django.contrib.auth.models import User 
import plotly.plotly as py 
import plotly.graph_objs as go 

class Article(models.Model): 
    user = models.ForeignKey(User, default='1') 
    titre = models.CharField(max_length=100, unique=True) 
    slug = models.SlugField(max_length=40) 
    likes = models.ManyToManyField(User, related_name="likes") 

    def __str__(self): 
     return self.titre 

    @property 
    def article_chart(self): 
     data = [ 
      go.Bar(
       x=[self.titre], #title of the article 
       y=[self.likes.count()] #number of likes on an article 
      ) 
     ] 
     plot_url = py.plot(data, filename='basic-bar') 

     return plot_url 

dashboard.html

<div>{{ article.article_chart }}</div> 

Perché il grafico a barre non è visibile? Qualche suggerimento ?

Answer 1

Il risultato di

py.plot(data, filename='basic-bar') 

è quello di generare un file HTML offline e restituire un URL locale di questo file

esempio File: ///your_project_pwd/temp-plot.html

Se si desidera renderlo in quadro Django, è necessario

• uso e ristrutturare della cartella in Django impostazioni

O

• utilizzare il metodo plotly.offline per generare il codice HTML con il vostro input data

Ci

è un esempio che avevo provato:

figure_or_data = [Scatter(x=[1, 2, 3], y=[3, 1, 6])] 

plot_html = plot_html, plotdivid, width, height = _plot_html(
    figure_or_data, True, 'test', True, 
    '100%', '100%') 

resize_script = '' 
if width == '100%' or height == '100%': 
    resize_script = (
     '' 
     '<script type="text/javascript">' 
     'window.removeEventListener("resize");' 
     'window.addEventListener("resize", function(){{' 
     'Plotly.Plots.resize(document.getElementById("{id}"));}});' 
     '</script>' 
    ).format(id=plotdivid) 

html = ''.join([ 
      plot_html, 
      resize_script]) 

return render(request, 'dashboard.html', {'html': html,}) 

Answer 2

La risposta di cui sopra è stato molto utile, io sono in realtà guardando per ridimensionare genitore, sto lavorando in angolare e ho usato il codice qui sotto per ottenere il ridimensionamento, sto avendo un problema simile e questa riga di codice è stato utile

<div class="col-lg-12" ng-if="showME" style="padding:0px"> 
    <div id="graphPlot" ng-bind-html="myHTML"></div> 
</div> 

il grafico verrà inserito attraverso il myHTML variabile

Tutto ho fatto è stato guardare fo r il ridimensionamento genitore e ha ottenuto il div id da solo con jquery e lo ha passato alla trama e ha funzionato.

$scope.$on("angular-resizable.resizeEnd", function (event, args){ 
     console.log(document.getElementById($('#graphPlot').children().eq(0).attr("id"))); 
     Plotly.Plots.resize(document.getElementById($('#graphPlot').children().eq(0).attr("id"))); 
});