Django पर प्लॉटली के साथ चार्ट कैसे बनाएं?

Question

मैं एक डैशबोर्ड बनाने की कोशिश कर रहा हूं जहां मैं पुस्तकालय plotly का उपयोग कर अपने मॉडल के डेटा (आलेख) का विश्लेषण कर सकता हूं।

Plotly बार चार्ट मेरे टेम्पलेट पर नहीं दिखा रहा है वहाँ नीचे कोड के साथ कोई त्रुटि है के बाद से, मैं अगर मैं कुछ गलत कर रहा हूँ सोच रहा हूँ:

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> 

क्यों बार चार्ट दिखाई नहीं देता है? कोई उपाय ?

Answer 1

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

का परिणाम एक ऑफ़लाइन HTML फ़ाइल पैदा करते हैं और इस फाइल को

जैसे की एक स्थानीय यूआरएल वापस जाने के लिए है फ़ाइल: ///your_project_pwd/temp-plot.html

आप Django ढांचे में यह प्रस्तुत करना चाहते हैं, आप के लिए

• उपयोग की जरूरत है और Django में अपने फ़ोल्डर का पुनर्गठन

सेटिंग

या

• उपयोग plotly.offline विधि अपने इनपुट के साथ एचटीएमएल कोड उत्पन्न करने के लिए data

वहाँ

एक उदाहरण जो मैं कोशिश की थी है:

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

ऊपर जवाब बहुत उपयोगी था, मैं माता पिता के आकार बदलने के लिए देख रहा है वास्तव में हूँ, मैं कोणीय में काम कर रहा हूँ और मैं प्राप्त करने के लिए नीचे दिए गए कोड का इस्तेमाल किया आकार बदलने, मैं एक ऐसी ही समस्या हो रही है और कोड की इस पंक्ति उपयोगी

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

ग्राफ चर myHTML

सभी मैं घड़ी किया था के लिए के माध्यम से डाला जाएगा था माता-पिता का आकार बदलना और jquery का उपयोग करके अकेले div आईडी मिला और इसे साजिश में पारित किया और यह काम किया।

$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"))); 
});