在Django模板中嵌入Plotly图表 [英] Embedding a Plotly chart in a Django template

问题描述

我正在尝试将绘图饼图嵌入Django html模板中.当图表以在线模式"(即html代码段存储在plotly服务器上)而不是离线模式"(即html本地存储)下生成时，此方法效果很好.在后一种情况下，该图表不会出现.我希望能够将html存储在我的本地服务器上，并从那里嵌入图.

I am trying to embed a plotly pie chart in a Django html template. This works fine when the chart is produced in 'online mode' (i.e. the html snippet is stored on the plotly server) but not in 'offline mode' (i.e. when the html is stored locally). In the latter case, the chart does not appear. I want to be able to store the html on my local server and embed the plots from there.

这是行得通的:

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>'

请注意， pie_url 在Django的Http渲染请求中作为字符串传递.模板使用 | 安全标签(即{{pie_url | safe}})将字符串解释为html.

Note that pie_url is passed as a string in the Http render request in Django. The template interprets the string as html using the | safe tag, i.e. {{ 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>'''

任何建议将不胜感激.

推荐答案

您可以将图表的html部分作为字符串返回，而不是将html写入文件中.例如，使用基于类的TemplateView:

Instead of writing the html to a file you can have plotly return the html part of the graph as a string. For example, using a class based TemplateView:

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 %}

这篇关于在Django模板中嵌入Plotly图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！