Wie erstellt man Diagramme mit Plotly auf Django?

Question

Ich versuche ein Dashboard zu erstellen, wo ich die Daten meines Modells (Artikel) mit der Bibliothek plotly analysieren kann.

Die Plotly Balkendiagramm auf meiner Vorlage zeigt nicht, ich frage mich, ob ich etwas falsch mache da unten mit dem Code keine Fehler gibt es:

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> 

Warum ist das Balkendiagramm nicht sichtbar? Irgendein Vorschlag ?

Answer 1

Das Ergebnis

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

ist eine Offline-HTML-Datei und gibt eine lokale URL der Datei

zum Beispiel zu erzeugen, Datei: ///your_project_pwd/temp-plot.html

Wenn Sie es in Django Framework machen möchten, müssen Sie

• Verwendung und Umstrukturierung des Ordners in Django-Einstellungen

OR

• Verwendung plotly.offline Methode des HTML-Code mit dem Eingang data
zu erzeugen

Es gibt ein Beispiel, das ich versucht hatte:

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

Die obige Antwort sehr nützlich war, bin ich in der Tat für Eltern Resize beobachtete ich in Winkel arbeite und ich den Code unten zu erreichen die Größe ändern, habe ich ein ähnliches Problem und diese Codezeile nützlich war

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

der graph wird

Alles, was ich tat, war Uhr fo durch die variable myHTML eingefügt werden R die Eltern Größe ändern und bekam die div-ID mit jquery allein und übergab es plotly und es hat funktioniert.

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