Jak tworzyć wykresy z Plotly na Django?

Question

Próbuję utworzyć pulpit nawigacyjny, na którym będę mógł analizować dane mojego modelu (artykuł) przy użyciu biblioteki plotly.

Plotly wykres słupkowy nie jest wyświetlany na mojego szablonu, zastanawiam się, czy ja robię coś źle, ponieważ nie ma błędu w kodzie poniżej:

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> 

Dlaczego wykres słupkowy nie jest widoczny? Jakieś sugestie ?

Answer 1

Wynik

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

jest generowanie pliku HTML w trybie offline i powrócić lokalny adres URL tego pliku

np Plik: ///your_project_pwd/temp-plot.html

Jeśli chcesz uczynić go w Django ram, trzeba

• użytku i restrukturyzacji swojego folderu w Django ustawień

LUB

• metoda użycie plotly.offline do generowania kodu HTML z wejściem data

Nie

jest przykładem, który próbowałem:

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

Powyższa odpowiedź była bardzo przydatna, jestem w rzeczywistości oglądania dla dominującego rozmiaru, ja pracuję w kanciaste i Użyłem poniższy kod, aby osiągnąć zmiany rozmiaru, mam podobny problem i ta linia kodu była przydatna

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

wykres zostanie wstawiony przez zmienną myHTML

ja tylko zegarek fo r rodzic zmienił rozmiar i otrzymał identyfikator div samodzielnie za pomocą jquery i przekazał go sprytnie i zadziałało.

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