कैलेंडर चार्ट: समय-श्रृंखला हीटमैप और दैनिक गतिविधि ट्रैकिंग

जब दैनिक आदतों, वेबसाइट ट्रैफिक, सर्वर गतिविधि लॉग या पूरे कैलेंडर वर्षों में बिक्री तीव्रता का अनुसरण करते हैं, तोकैलेंडर चार्टएक प्रभावी, ग्रिड-आधारित दृश्य व्यवस्था प्रदान करता है। योगदान ग्राफ और मौसमी हीटमैप के आधार पर बनाया गया, कैलेंडर चार्ट विशिष्ट कैलेंडर दिनों के माध्यम से निरंतर मात्रात्मक मापदंडों को नक्शा बनाता है, जिससे उपयोगकर्ता तुरंत उच्च गतिविधि चोटियों, छुट्टी के दिनों में भिन्नताओं और बहु-माह के मौसमी पैटर्न की पहचान कर सकते हैं।

कैलेंडर चार्ट की यांत्रिकता

एपाची ईचार्ट्स में, कैलेंडर चार्ट एक विशेष कैलेंडर निर्देशांक प्रणाली और एक हीटमैप या बिखरा हुआ श्रृंखला प्रकार के साथ। मानक कार्टेशियन एक्स और वाई अक्ष के बजाय, ईचार्ट्स तारीख के स्ट्रिंग का उपयोग करके दिन और महीने की ग्रिड स्थिति स्वचालित रूप से गणना करता है।

1. आवश्यक सेटअप

एक मूल वार्षिक कैलेंडर हीटमैप बनाने के लिए, एक कैलेंडर घटक जो एक सीमा निर्दिष्ट करता है (उदाहरण के लिए, '2026'), एक दृश्य मान मापदंड रंग ढलान को नियंत्रित करने के लिए, और दैनिक तारीख-मान ट्यूपल को इस प्रकार पारित करें ['YYYY-MM-DD', मान]:

विकल्प = {
    शीर्षक: {
        ऊपर: 10,
        बाएं: 'केंद्र',
        पाठ: 'दैनिक कमिट्स (2026)'
    },
    सुझाव: {
        प्रारूपक: कार्यान्वयन (पैरामीटर्स) {
            लौटाएं पैरामीटर्स मान[0] + ': ' + पैरामीटर्स मान[1] + ' कमिट्स';
        }
    },
    दृश्य मान: {
        न्यूनतम: 0,
        अधिकतम: 100,
        प्रकार: 'खंडित',
        दिशा: 'क्षैतिज',
        बाएं: 'केंद्र',
        ऊपर: 65,
        सीमा में: {
            रंग: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
        }
    },
    कैलेंडर: {
        ऊपर: 120,
        बाएं: 30,
        दाएं: 30,
        सेल आकार: ['स्वचालित', 13],
        सीमा: '2026',
        आइटम शैली: {
            किनारे का चौड़ाई: 0.5,
            किनारे का रंग: '#ccc'
        },
        वर्ष लेबल: { दिखाएं: गलत }
    },
    श्रृंखला: {
        प्रकार: 'हीटमैप',
        निर्देशांक प्रणाली: 'कैलेंडर',
        डेटा: [
            ['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],
            ['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],
            ['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]
        ]
    }
};

 

उन्नत संरचनात्मक तकनीकें

कैलेंडर चार्ट को लंबवत स्क्रॉलिंग लेआउट के लिए अनुकूलित किया जा सकता है या बिखरे हुए प्रतिनिधित्व के साथ कस्टमाइज किया जा सकता है ताकि अलग-अलग दैनिक मापदंडों को दृश्याकृत किया जा सके।

1. लंबवत बहु-माह कैलेंडर दृश्य

बदलें ओरिएंट: 'ऊर्ध्वाधर'कैलेंडर कंपोनेंट पर ऊर्ध्वाधर तरीके से महीनों को लगाने के लिए—लंबे डैशबोर्ड विजेट्स या मोबाइल लेआउट्स के लिए आदर्श:

विकल्प = {
    शीर्षक: {
        पाठ: 'Q1 गतिविधि लॉग',
        बाएं: 'केंद्र'
    },
    सुझाव: {},
    दृश्य मान: {
        न्यूनतम: 0,
        अधिकतम: 500,
        प्रकार: 'निरंतर',
        ओरिएंट: 'ऊर्ध्वाधर',
        दाएं: 10,
        ऊपर: 'केंद्र',
        अंतराल में: {
            रंग: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
        }
    },
    कैलेंडर: {
        ऊपर: 60,
        बाएं: 'केंद्र',
        ओरिएंट: 'ऊर्ध्वाधर',
        सीमा: ['2026-01-01', '2026-03-31'],
        सेल आकार: [20, 20],
        वर्ष लेबल: { दिखाएं: गलत },
        दिन लेबल: {
            पहला दिन: 1, // सप्ताह सोमवार से शुरू करें
            नाम मानचित्र: 'en'
        },
        महीना लेबल: { नाम मानचित्र: 'en' }
    },
    श्रृंखला: {
        प्रकार: 'तापमान नक्शा',
        निर्देशांक प्रणाली: 'कैलेंडर',
        डेटा: [
            ['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
            ['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
        ]
    }
};

 

लेआउट और स्टाइलिंग को सुगठित करना

कैलेंडर निर्देशांक प्रणाली को बिखरे हुए श्रृंखला के साथ मिलाने से आप बिंदु के आकार को रंग के ब्लॉक्स के अलावा तीव्रता के आधार पर स्केल कर सकते हैं।

1. बिखरे हुए बबल कैलेंडर

उपयोग करकेप्रकार: 'बिखरा'पर एककैलेंडरनिर्देशांक प्रणाली बातचीत वाले बबल-शैली के दैनिक संकेतक बनाती है:

विकल्प = {
    शीर्षक: {
        पाठ: 'दैनिक आदेश आयतन',
        बाएं: 'केंद्र'
    },
    सुझाव: {
        प्रारूपक: कार्यान्वयन (पैरामीटर्स) {
            लौटाएं पैरामीटर्स मान[0] + ': ' + पैरामीटर्स मान[1] + ' आदेश';
        }
    },
    कैलेंडर: {
        ऊपर: 80,
        बाएं: 40,
        दाएं: 40,
        सीमा: '2026-05',
        सेल आकार: ['स्वचालित', 25],
        आइटम शैली: {
            रंग: '#f8fafc',
            बॉर्डर चौड़ाई: 1,
            बॉर्डर रंग: '#e2e8f0'
        }
    },
    श्रृंखला: {
        प्रकार: 'बिखरा',
        निर्देशांक प्रणाली: 'कैलेंडर',
        प्रतीक आकार: कार्यान्वयन (मान) {
            लौटाएं मान[1] / 10; // आदेश गिनती के अनुसार बबल आकार को स्केल करता है
        },
        आइटम शैली: {
            रंग: '#3b82f6',
            अदृश्यता: 0.8
        },
        डेटा: [
            ['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
            ['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
        ]
    }
};

 

रणनीतिक बेस्ट प्रैक्टिसेज

  • तारीखों को ISO प्रारूप के अनुरूप बनाएं: सुनिश्चित करें कि आपकी श्रृंखला डेटा ऐरे के भीतर तारीखें मानक'YYYY-MM-DD'स्ट्रिंग प्रारूप का पालन करें ताकि कैलेंडर ग्रिड रिकॉर्ड्स को सही तरीके से मैप कर सके।
  • सेट करेंपहला दिनक्षेत्रीय सुसंगतता के लिए:उपयोग करेंदिन लेबल.पहला दिन (सेट किया गया है0 रविवार के लिए या 1 सोमवार के लिए) अपने दर्शकों के स्थानीय कैलेंडर प्रथाओं के अनुरूप होने के लिए।
  • योगदान के लिए टुकड़ा-टुकड़ा दृश्य मानचित्र को जोड़ें: जब गिटहब-शैली के कमिट ग्राफ को रेंडर करते हैं, तो एक का उपयोग करें टुकड़ा-टुकड़ा लगातार ढलानों के बजाय अलग-अलग रंग बिंदुओं वाले दृश्य मानचित्र प्रकार का उपयोग करें ताकि श्रेणीबद्ध दृश्य चरण स्पष्ट हों।
Scroll to Top