PlotlyでDjangoでチャートを作成するには？

Question

ライブラリplotlyを使用してモデルのデータ（記事）を分析できるダッシュボードを作成しようとしています。

Plotlyバーチャートは以下のコードでエラーがないので、私は何か間違ったことをやっている場合、私は疑問に思って、私のテンプレートに表示されていません。

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> 

棒グラフが表示されないのはなぜですか？なにか提案を ？

Answer 1

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

の結果は

例えば、オフラインHTMLファイルを生成し、このファイルのローカルURLを返すことですファイル：///your_project_pwd/temp-plot.html

あなたはDjangoフレームワークでそれをレンダリングしたい場合は、

• ジャンゴでの使用とフォルダの再構築が

を設定する必要があります

OR

• ご入力data
とHTMLコードを生成するために使用plotly.offline方法

私がしようとした例があります：

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

上記の答えは非常に有用であった、私は親のサイズ変更のために見て、実際には午前、私は角度で働いていますし、私は達成するために以下のコードを使用サイズ変更、私は同様の問題を抱えていますし、このコード行は、グラフを変数myHTML

すべて私がやった時計foを通って挿入されます

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

有用でしたr親はサイズを変更し、jqueryを使ってdiv idを単独で取得し、それを陰謀に渡して動作させました。