Làm thế nào để tạo biểu đồ với Plotly trên Django?

Question

Tôi đang cố gắng tạo trang tổng quan nơi tôi có thể phân tích dữ liệu của mô hình (Điều) bằng cách sử dụng thư viện plotly.

Các biểu đồ thanh Plotly không hiển thị trên mẫu của tôi, tôi tự hỏi nếu tôi làm điều gì sai vì không có lỗi với mã dưới đây:

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> 

Tại sao biểu đồ thanh không hiển thị? Bất kì lời đề nghị nào ?

Answer 1

Kết quả của

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

là để tạo ra một tập tin HTML ẩn và trả lại một URL địa phương của tập tin này

ví dụ file: ///your_project_pwd/temp-plot.html

Nếu bạn muốn làm cho nó trong khuôn khổ Django, bạn cần phải

• sử dụng và tái cấu trúc thư mục của bạn trong Django cài đặt

HOẶC

• phương pháp sử dụng plotly.offline để tạo mã HTML với đầu vào của bạn data

Có một ví dụ mà tôi đã cố gắng:

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

Câu trả lời ở trên là rất hữu ích, tôi trên thực tế xem cho thay đổi kích thước phụ huynh, tôi đang làm việc trong góc và tôi đã sử dụng mã dưới đây để đạt được thay đổi kích cỡ, tôi đang gặp một vấn đề tương tự và dòng mã này là hữu ích

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

đồ thị sẽ được chèn qua myHTML biến

Tất cả tôi đã làm là đồng hồ fo r cha mẹ thay đổi kích thước và nhận id div một mình bằng cách sử dụng jquery và chuyển nó cho cốt truyện và nó làm việc.

$scope.$on("angular-resizable.resizeEnd", function (event, args){ 
     console.log(document.getElementById($('#graphPlot').children().eq(0).attr("id"))); 
     Plotly.Plots.resize(document.getElementById($('#graphPlot').children().eq(0).attr("id"))); 
});