☰

Django テンプレートに Plotly チャートを埋め込む 質問する

tag-icon • tag-icon python django plotly
Django テンプレートに Plotly チャートを埋め込む 質問する

私は、Django HTML テンプレートに plotly 円グラフを埋め込もうとしています。これは、グラフが「オンライン モード」で生成された場合 (つまり、HTML スニペットが plotly サーバーに保存されている場合) は正常に機能しますが、「オフライン モード」では機能しません (つまり、HTML がローカルに保存されている場合)。後者の場合、グラフは表示されません。HTML をローカル サーバーに保存し、そこからグラフを埋め込むことができるようにしたいと考えています。

機能する部分は次のとおりです。

import plotly.plotly as py
import plotly.graph_objs as go
labels = [1,2,3,4]
values = [10,20,30,40]
ndata = 100
fig = {
    'data': [{'labels': labels,
          'values': values,
          'type': 'pie',
          'textposition':"none",
          'textinfo':"percent",
          'textfont':{'size':'12'},
          'showlegend':'false'}],
    'layout': {'title': 'Total:'+str(ndata),
           'showlegend':'false',
           'height':'200',
           'width':'200',
           'autosize':'false',
           'margin':{'t':'50','l':'75','r':'0','b':'10'},
           'separators':'.,'}
}
plotly_url = py.plot(fig, filename='myfile', auto_open=False)
pie_url = '<iframe width="200" height="200" frameborder="0" seamless="seamless" scrolling="no" src='+plotly_url+'.embed?width=200&height=200&link=false&showlegend=false></iframe>'

ご了承くださいパイ_urlDjangoのHttpレンダリングリクエストでは文字列として渡されます。テンプレートは、|安全なタグ、つまり {{ pie_url|safe }}。

動作しない部分は次のとおりです:

from plotly.offline import download_plotlyjs, plot
import plotly.graph_objs as go
labels = [1,2,3,4]
values = [10,20,30,40]
ndata = 100
fig = {
    'data': [{'labels': labels,
          'values': values,
          'type': 'pie',
          'textposition':"none",
          'textinfo':"percent",
          'textfont':{'size':'12'},
          'showlegend':'false'}],
    'layout': {'title': 'Total:'+str(ndata),
           'showlegend':'false',
           'height':'200',
           'width':'200',
           'autosize':'false',
           'margin':{'t':'50','l':'75','r':'0','b':'10'},
           'separators':'.,'}
}
plotly_url = plot(fig, filename='file:///home/website/pie.html', auto_open=False)
pie_url = '''<iframe width="200" height="200" frameborder="0" seamless="seamless" scrolling="no" src=\"'''+plotly_url+'''.embed?width=200&height=200&link=false&showlegend=false\"></iframe>'''

アドバイスをいただければ幸いです。

ベストアンサー1

HTML をファイルに書き込む代わりに、plotly でグラフの HTML 部分を文字列として返すことができます。たとえば、クラス ベースの TemplateView を使用すると、次のようになります。

編集: plotly の最新バージョン (2021/08 時点) を使用するように更新しました。テンプレートを変更する必要はありません。

import plotly.graph_objects as go

class Graph(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        x = [-2,0,4,6,7]
        y = [q**2-q+3 for q in x]
        trace1 = go.Scatter(x=x, y=y, marker={'color': 'red', 'symbol': 104, 'size': "10"},
                            mode="lines",  name='1st Trace')

        layout=go.Layout(title="Meine Daten", xaxis={'title':'x1'}, yaxis={'title':'x2'})
        figure=go.Figure(data=['trace1'],layout=layout)

        context['graph'] = figure.to_html()

        return context

元のコードは次のとおりです:

import plotly.offline as opy
import plotly.graph_objs as go

class Graph(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        x = [-2,0,4,6,7]
        y = [q**2-q+3 for q in x]
        trace1 = go.Scatter(x=x, y=y, marker={'color': 'red', 'symbol': 104, 'size': "10"},
                            mode="lines",  name='1st Trace')

        data=go.Data([trace1])
        layout=go.Layout(title="Meine Daten", xaxis={'title':'x1'}, yaxis={'title':'x2'})
        figure=go.Figure(data=data,layout=layout)
        div = opy.plot(figure, auto_open=False, output_type='div')

        context['graph'] = div

        return context

テンプレート:

{% if graph %}
<div style="width:600;height:500">
{{ graph|safe }}
</div>
{% endif %}

おすすめ記事