在Django模板中嵌入一个Plotly图表

Question

我想在Django的html模板中嵌入一个标准的饼图。当图表以“在线模式”（即html片段存储在绘图服务器上）而不是以“离线模式”（即，当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>' 

注意pie_url传递作为在HTTP字符串在Django呈现请求。该模板使用|将该字符串解释为html安全标记，即{{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>''' 

任何意见，将不胜感激。

Answer 1

不是将html写入文件，而是将图形的html部分以字符串的形式返回。例如，使用基于类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 %}