Nhúng biểu đồ Plotly vào một mẫu Django

Question

Tôi đang cố nhúng biểu đồ hình tròn vào một mẫu html Django. Điều này hoạt động tốt khi biểu đồ được tạo trong 'chế độ trực tuyến' (tức là đoạn mã html được lưu trữ trên máy chủ sơ đồ) nhưng không được lưu trong 'chế độ ngoại tuyến' (tức là khi html được lưu trữ cục bộ). Trong trường hợp sau, biểu đồ không xuất hiện. Tôi muốn để có thể lưu trữ các html trên máy chủ địa phương của tôi và nhúng các lô từ đó.

Dưới đây là bit mà làm việc:

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

Lưu ý rằng pie_url được chuyển dưới dạng chuỗi trong Http làm theo yêu cầu trong Django. Mẫu diễn giải chuỗi dưới dạng html bằng cách sử dụng | thẻ an toàn, tức là {{pie_url | safe}}.

Dưới đây là bit điều đó không làm việc:

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

Lời khuyên nào sẽ được đánh giá cao.

Answer 1

Thay vì viết html thành một tệp, bạn có thể trả về phần html của biểu đồ dưới dạng chuỗi. Ví dụ, sử dụng một lớp dựa 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 

và mẫu:

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