Django में रेखांकन (चार्ट) बनाएं

कई वेब डेवलपर्स समय-समय पर आरेखों का उपयोग करते हुए अपेक्षाकृत बड़ी मात्रा में डेटा की कल्पना करने की आवश्यकता का सामना करते हैं (इसके बाद मैं उन्हें ग्राफ़ कहूंगा, हालांकि यह पूरी तरह से सच नहीं है)। कार्य नया नहीं है, और नेटवर्क पर कई तैयार समाधान हैं: सर्वर साइड पर और क्लाइंट साइड पर काम करने वाले चित्र, कैनवस, एसवीजी, फ्लैश, सिल्वरलाइट ...

इस लेख में, मैं django- गूगल-चार्ट और Google चार्ट टूल का उपयोग करने की कुछ विशेषताओं के बारे में बात करूंगा जो कि Django चल रही साइट पर साजिश रचने के लिए है।

अक्सर, जब आपको किसी पृष्ठ पर ग्राफ़ को जोड़ने की आवश्यकता होती है, तो डेवलपर कम से कम प्रतिरोध का रास्ता अपनाता है: इंटरनेट पर एक उदाहरण से जावास्क्रिप्ट की प्रतिलिपि बनाता है और किसी तरह इसमें एप्लिकेशन से डेटा प्रदर्शित करता है। यह कुछ इस प्रकार है:

var chart_data = [ {% for row in chart_data %} [{{ row.0 }}, {{ row.1 }}], {% endfor %} ]; 

यह बुरा क्यों है?

• कोड को पढ़ना मुश्किल है, जिससे गलती करना आसान है। क्या आपको मेरे उदाहरण में कोई त्रुटि दिखाई दी? :)
• इसे पैमाना करना कठिन है। जब आपको पृष्ठ पर दूसरा ग्राफ़ जोड़ने की आवश्यकता होती है, तो वे आमतौर पर कोड के समान टुकड़े को फिर से कॉपी करते हैं और चर नामों को बदलते हैं। परिणाम एक अपठनीय गड़बड़ है, इसे डिबग करना और परिवर्तन करना अप्रिय है।
• मजबूत संदर्भ बाध्यकारी। ऐसे टेम्पलेट का पुन: उपयोग सीमित है।

एक अस्थायी समाधान के लिए, यह डिज़ाइन अभी भी उपयुक्त है, लेकिन अब और नहीं।

समस्या का बयान

ड्राइंग ग्राफ के लिए एक अच्छा समाधान:

1. आपको साइट पर नए ग्राफिक्स जोड़ने और अनावश्यक रूप से हटाने की अनुमति देता है;
2. सामान्य तत्वों (उदाहरण के लिए, रंग योजना) के निर्धारण के लिए DRY सिद्धांत के साथ शिकायत;
3. पुन: उपयोग किया जा सकता है;
4. एक नया एपीआई का आविष्कार नहीं करता है।

समाधान का विकल्प

Django- गूगल-चार्ट चार्टिंग एप्लिकेशन मेरे वर्तमान प्रोजेक्ट में हैक के एक छोटे से सेट से बाहर हो गया है। अलारमा: यह पहली सार्वजनिक रिलीज है, विचित्र कीड़े संभव हैं। सुधार और टिप्पणियों का स्वागत है।

स्थापना

 $ pip install django-google-charts #  $ easy_install django-google-charts 

INSTALLED_APPS 'googlecharts' जोड़ें।

यह कैसे काम करता है (सामान्य दृश्य)

 {% load googlecharts %} {% googlecharts %} {% data  " " %} {# ()   #} {% col "" "" %}...{% endcol %} {#  #} {% col "" "" %}...{% endcol %} {#   #} ... {% enddata %} {% options " " %} {# ()   #} ... {% endoptions %} {% graph "#id" "" "" %} {#   #} {% endgooglecharts %} 

मैं आपको प्रत्येक टैग के उद्देश्य के बारे में थोड़ा बताऊंगा।

{% googlecharts %}...{% endgooglecharts %}

यह आवश्यक लिपियों को जोड़ता है, संपूर्ण संरचना के लिए एक कंटेनर है। कुछ भी दिलचस्प नहीं है।

{% data "" %}...{% enddata %}

एक नाम दिया गया डेटासेट। आप नाम को छोड़ सकते हैं ( "default" प्राप्त करें)।

{% col "" "" %}...{% endcol %}

स्वरूप। Google विज़ुअलाइज़ेशन API में डेटा प्रकार हैं:

 'string' 'number' 'boolean' 'date' 'datetime' 'timeofday' 

प्रलेखन में अधिक पढ़ें।

विशेष वैरिएबल val टैग के अंदर से गुजरा है, इस जगह आप इसे प्रारूपित कर सकते हैं:

 {% col "string" "Date" %}'{{ val|date:"M j" }}'{% endcol %} {# ,  #} {% col "number" %}{{ val|floatformat:2 }}{% endcol %} 

परिणाम घोषित प्रकार के अनुरूप होना चाहिए; स्ट्रिंग के चारों ओर खुद को नहीं डाला जाएगा।

एक उदाहरण है। मान लें कि हमने {% data %} ब्लॉक के लिए निम्न संदर्भ चर पारित किया है:

 [['foo', 32], ['bar', 64], ['baz', 96]] 

इनपुट लाइन में तत्वों की संख्या के अनुसार हमें दो टैग {% col %} की आवश्यकता है। पहला इनपुट 'फू', 'बार' और 'बाज' प्राप्त करेगा; दूसरा, क्रमशः, 32, 64 और 96। कार्यान्वयन (सबसे सरल) इस तरह दिखाई दे सकता है:

 {% col "string" "Name" %}"{{ val }}"{% endcol %} {% col "number" "Value" %}{{ val }}{% endcol %} 

{% options "" %}...{% endoptions %}

चार्ट विकल्प।

 {% options %} kind: "LineChart", options: { width: 300, height: 240 // ... } {% endoptions %} 

टैग के अंदर एक जावास्क्रिप्ट ऑब्जेक्ट है, आप वैश्विक चर और कॉल फ़ंक्शन का उपयोग कर सकते हैं। प्रत्येक प्रकार के लिए चार्ट प्रकार और समर्थित विकल्प यहां सूचीबद्ध हैं ।

{% graph "id_" "" "" %}

हम पृष्ठ पर एक तत्व में ग्राफ प्रदर्शित करते हैं। अंतिम दो मापदंडों को छोड़ दिया जा सकता है, परिणाम "default" "default" ।

उदाहरण का उपयोग करें

मान लीजिए कि हमारे पास एक मॉडल है:

 class Payment(models.Model): amount = models.DecimalField(max_digits=11, decimal_places=4) datetime = models.DateTimeField() 

आप ग्राफ़ में प्रदर्शन के लिए डेटा तैयार करने के लिए django-qsstats-Magic का उपयोग कर सकते हैं।

 from qsstats import QuerySetStats def view_func(request): start_date = ... end_date = ... queryset = Payment.objects.all() #   ... qsstats = QuerySetStats(queryset, date_field='datetime', aggregate=Count('id')) # ...     values = qsstats.time_series(start_date, end_date, interval='days') return render_to_response('template.html', {'values': values}) 

time_series पद्धति निम्न रूप में डेटा लौटाती है:

 [[date, value], [date, value], ...] 

Template.html फ़ाइल में:

 {% load googlecharts %} <div id="count_graph"></div> {% googlecharts %} {% data values "count" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "# of payments" %}{{ val }}{% endcol %} {% enddata %} {% options %} kind: "LineChart", options: { backgroundColor: "#f9f9f9", colors: ["#09f"], gridlineColor: "#ddd", legend: "none", vAxis: {minValue: 0}, chartArea: {left: 40, top: 20, width: 240, height: 180}, width: 300, height: 240 } {% endoptions %} {% graph "count_graph" "count" %} {#     #} {% endgooglecharts %} 

स्केलिंग

अब, पेज में एक और ग्राफ जोड़ने के लिए, आपको निम्नलिखित कार्य करने होंगे:

- डेटा एकत्र करें (view.py):

  #         summary = qsstats.time_series(start_date, end_date, interval='days', aggregate=Sum('amount')) return render_to_response('template.html', {'values': values, 'summary': summary}) 

- template.html में जोड़ें:

 <div id="count_sum"></div> ... {% data summary "sum" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "Paid amount, USD" %}{{ val|floatformat:2 }}{% endcol %} {% enddata %} ... {% graph "count_sum" "sum" %} {#    ,  #} 

GitHub

Django- गूगल-चार्ट के स्रोत कोड में एक डेमो प्रोजेक्ट भी है। इसे शुरू करने के लिए, बस करें:

 $ python manage.py syncdb --noinput #    sqlite  /tmp $ python manage.py populatedb #     $ python manage.py runserver 

परीक्षण परियोजना इस तरह दिखती है:

पहली सार्वजनिक रिलीज की सीमाएं (मरहम में उड़ना)

1. प्रति पृष्ठ केवल एक टैग {% googlecharts %} ;
2. (लगभग) कोई त्रुटि जाँच, विशेष रूप से जावास्क्रिप्ट में;
3. लुप्तप्राय दस्तावेज।

इसे पढ़ने वाले सभी को धन्यवाद। आप ग्राफिक्स कैसे बनाते हैं?