ओवरलैपिंग बार चार्ट

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

लेकिन वे भी खूबसूरत हैं!

आपका दिमाग शायद मेरे जैसा है और पहले से ही यह पता लगाना शुरू कर रहा है कि आप कैसे जाएंगे और उसे कोड करेंगे। यहां बताया गया है कि मैंने इससे कैसे निपटा।

HTML

हम मार्कअप के साथ शुरुआत करने जा रहे हैं क्योंकि, ठीक है, इस तरह हम जानते हैं कि स्टाइल की क्या ज़रूरत है।

<div class="container">
  <div class="chart">
    <dl class="numbers">
      <dd><span>100%</span></dd>
      <!-- all the way to 0% -->
    </dl>
    <dl class="bars">
      <div>
          <dt>2018</dt>
          <dd>
            <div class="bar" data-percentage="50"></div>
            <div class="bar overlap" data-percentage="53"></div>
          </dd>
        </div>
      <div>
      <!-- more bars -->
    </dl>
  </div>
</div>

हम विवरण सूचियों का उपयोग करेंगे (<dl>) क्योंकि यह मानक आदेशित और अनियंत्रित सूचियों की तुलना में बहुत अधिक अर्थपूर्ण दृष्टिकोण है। दूसरा कारण यह है कि हम प्रत्येक बार में एक लेबल शामिल कर रहे हैं। परिभाषा सूचियों के विपरीत एक शीर्षक या विवरण जोड़ने के लिए सामान्य सूचियों में उनके भीतर कोई टैग नहीं होता है। सरल शब्दों में, यह अधिक समझ में आता है और अधिक पठनीय भी है।

पहली विवरण सूची, .numbers, y-अक्ष है। .bars वह जगह है जहां डेटा की कल्पना की जाती है और मैंने एक्स-अक्ष बनाने के लिए एक परिभाषा सूची भी बनाई है। प्रत्येक सूची आइटम में एक होता है .bar और एक विवरण शब्द (डीटी) के रूप में लेबल।

और डेटा के साथ क्या हो रहा है गुण? data-percentage बार की ऊंचाई निर्दिष्ट करने के लिए उपयोग किया जा रहा है, जो अंततः y-अक्ष पर इसके मान का प्रतिनिधित्व करता है। हम इसे मैन्युअल रूप से प्रत्येक बार के लिए सीएसएस में सेट कर सकते हैं, लेकिन यह दोहराव और बहुत सारे अतिरिक्त कोड हैं जिन्हें सीएसएस की कुछ पंक्तियों से बदला जा सकता है।

मूल चार्ट शैलियाँ

हम बहुत से द्वि-आयामी दिशाओं के साथ काम कर रहे हैं, इसलिए सब कुछ व्यवस्थित करने के लिए फ्लेक्सबॉक्स हमारा मित्र बनने जा रहा है। हम बना सकते हैं .chart तत्व एक लचीला कंटेनर है जो y-अक्ष लेबल और चार्ट को एक दूसरे के बगल में रखता है row दिशा.

.chart {
  display: flex;
}

फ्लेक्सबॉक्स डिफ़ॉल्ट होने के बाद से हमें दिशा निर्दिष्ट करने की भी आवश्यकता नहीं है row. चलो ऐसा करते हैं और फिर y- अक्ष के साथ लेबल की सूची में फ्लेक्सबॉक्स जोड़ते हैं, जबकि हम जानते हैं कि वे इसमें चलेंगे column दिशा.

.numbers {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
}

मानो या न मानो, हम बार के लिए फिर से फ्लेक्सबॉक्स का उपयोग कर सकते हैं, क्योंकि वे भी एक में चल रहे हैं row दिशा.

.bars {
  display: flex;
  flex: auto; /* fill up the rest of the `.chart` space */
  gap: 60px;
}

मैंने इसे सेट अप किया है ताकि .bars जो कुछ भी स्थान बचा है उसे स्वतः ही ग्रहण कर लेता है y-axis .numbers.

आपने शायद इसे HTML में देखा है, लेकिन "बार" वास्तव में दो बार हैं जहां एक दूसरे को ओवरलैप करता है। मैंने उनको एक सामान्य में लपेट लिया <div> कि हम अभी तक एक और लचीले कंटेनर के रूप में उपयोग कर सकते हैं जो परिभाषा शब्द रखता है (<dt>) हम एक लेबल और विवरण विवरण के रूप में उपयोग कर रहे हैं (<dd>) जिसमें दोनों बार मान होते हैं:

.bars > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

प्रत्येक बार की चौड़ाई समान होगी, इसलिए flex: 1. जब हम उस पर होते हैं तो हम तत्व की अपेक्षाकृत स्थिति बना रहे होते हैं क्योंकि हम प्रत्येक बार को पूरी तरह से स्थिति में लाने वाले होते हैं और हम यह सुनिश्चित करना चाहते हैं कि वे अपने कंटेनरों में रहें।

प्रत्येक बार में एक प्रतिशत ऊंचाई होती है जो लंबवत y-अक्ष के साथ मानों से मेल खाती है। आपको यह भी याद होगा कि हमने प्रत्येक बार को a data-percentage विशेषता - हम एक छोटे से जावास्क्रिप्ट में छिड़कने जा रहे हैं जो उन मानों का उपयोग करके प्रत्येक बार की ऊंचाई निर्धारित करता है।

var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
  var height = bar.getAttribute("data-percentage");
  bar.style.height = height + "%";
});

यह हमारा मूल चार्ट है!

हम इसे उस स्थान तक पहुँचाना चाहते हैं जहाँ हम बार को एक दूसरे को ओवरलैप करते हुए देख सकते हैं। वह अगला है!

ओवरलैपिंग बार

एक बार को दूसरे को ओवरलैप करने की चाल मज़ेदार है क्योंकि हम अक्सर कोशिश कर रहे हैं को रोकने के सीएसएस में नेत्रहीन ओवरलैपिंग से चीजें। लेकिन इस मामले में हम वास्तव में चाहते हैं कि ऐसा हो।

बार पहले से ही अतिव्यापी हैं; यह बताना मुश्किल है। HTML में ध्यान दें कि दूसरा .bar प्रत्येक सेट में एक अतिरिक्त है .overlap कक्षा। आइए इसका उपयोग सलाखों को अलग करने के लिए करें। इसके लिए आप अपनी खुद की स्टाइल चुनने के लिए पूरी तरह से स्वतंत्र हैं। मैं इसमें थोड़ा पैडिंग जोड़ रहा हूं .overlap सलाखों ताकि वे अन्य सलाखों की तुलना में व्यापक हों। फिर मैं स्टैकिंग ऑर्डर का उपयोग करके ट्वीक कर रहा हूं z-index वैसा ही किया .overlap बार अन्य सलाखों के नीचे बैठते हैं।

आइए एक किंवदंती जोड़ें

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

<figure class="legend">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

एक का प्रयोग <figure> मुझे सही लगता है। वे अक्सर छवियों को लपेटने के लिए उपयोग किए जाते हैं, लेकिन कल्पना कहते हैं उनका उपयोग "चित्रण, आरेख, फोटो, कोड सूची, आदि को एनोटेट करने के लिए किया जाता है।" और हम एक आरेख के साथ काम कर रहे हैं। हम शायद वस्तुओं को रखने के लिए एक अनियंत्रित सूची का उपयोग कर सकते हैं, लेकिन मैं एक अर्थहीन के साथ गया था <div>. अगर किसी के पास इसे चिह्नित करने के सर्वोत्तम तरीके पर कोई राय है, तो मैं टिप्पणियों में सभी कान हूं!

एक बार फिर, स्टाइलिंग पूरी तरह आप पर निर्भर है:

अभिगम्यता संबंधी विचार

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

विशेष रूप से, हमें चाहिए:

1. जांचें कि हमारे रंगों में उनके बीच बहुत अधिक अंतर है,
2. कीबोर्ड उपयोगकर्ताओं को प्रत्येक ओवरलैपिंग बार पर टैब करने की अनुमति दें, और
3. सुनिश्चित करें कि स्क्रीन पाठक सामग्री की घोषणा करते हैं।

रंग विरोधाभास

हमें इसके बीच पर्याप्त कंट्रास्ट चाहिए:

• अतिव्यापी सलाखों
• बार और चार्ट पृष्ठभूमि
• लेबल पाठ और पृष्ठभूमि

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

यहाँ मैं क्या उपयोग कर रहा हूँ:

• ओवरलैपिंग बार: (#25DEAA और #696969: 3.16:1 अनुपात)
• बार्स और चार्ट पृष्ठभूमि (#696969 और #111: 3.43:1 अनुपात)
• Y-अक्ष लेबल टेक्स्ट और पृष्ठभूमि (#fff और #333: 12.63: 1 अनुपात)

सलाखों के बीच टैबिंग

इसे प्राप्त करने के लिए जहां कीबोर्ड उपयोगकर्ता प्रत्येक व्यक्तिगत बार का चयन कर सकते हैं टैब कुंजी, हम HTML तक पहुंच सकते हैं tabindex विशेषता। हम इस गुण को प्रत्येक बार (दोनों) में जोड़ने के लिए प्रत्येक फ़ंक्शन के अंदर निम्नलिखित जावास्क्रिप्ट का उपयोग कर सकते हैं। हम टैब इंडेक्स को इस पर सेट करेंगे 0:

bar.setAttribute("tabindex", 0);

जब हम उस पर होते हैं तो बार का चयन करने पर हम रूपरेखा को बेहतर बनाने के लिए कुछ CSS भी जोड़ सकते हैं:

.bar:focus {
  outline: 1.5px solid #f1f1f1;
}

स्क्रीन पाठकों पर सामग्री की घोषणा

अभिगम्यता का एक अन्य महत्वपूर्ण पहलू यह सुनिश्चित करना है कि स्क्रीन पाठक बार और उनके प्रतिशत की घोषणा कर सकें।

हम एक में दो अलग-अलग चार्ट के साथ काम कर रहे हैं: एक चार्ट जो "अनुमानित" मान दिखाता है और दूसरा जो "वास्तविक" मान दिखाता है। यह बहुत अच्छा होगा यदि उपयोगकर्ता को पता हो कि किस बार की घोषणा की जा रही है, तो चलिए उन्हें लेबल करते हैं aria-label विशेषता:

<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>

ध्यान दें कि हमारे पास सीधे HTML में भी बार का मान है। इसकी घोषणा की जाएगी, लेकिन हम अभी भी इसे नेत्रहीन छिपाना चाहते हैं। हम इस्तेमाल कर सकते हैं transparent उसके लिए पाठ करें, लेकिन दूसरा तरीका यह है कि इसका उपयोग करें क्लासिक .visually-hidden चाल मूल्य को लपेटकर span:

<div class="bar" data-percentage="50" aria-label="Estimate">
  <span class="visually-hidden">50%</span>
</div>

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

जब हम सामग्री की घोषणा करने की बात कर रहे हैं, तो हम शायद y-अक्ष लेबल को पढ़ने से रोक सकते हैं। ऐसा नहीं है कि उपयोगकर्ता के पास जानकारी नहीं है, क्योंकि प्रत्येक बार के लिए वास्तविक प्रतिशत पहले से ही उपलब्ध हैं और घोषित किए गए हैं। हम उपयोग कर सकते हैं aria-hidden उसके लिए विशेषता:

<dl class="numbers" aria-hidden="true">
  <dd><span>100%</span></dd>
  <dd><span>80%</span></dd>
  <dd><span>60%</span></dd>
  <dd><span>40%</span></dd>
  <dd><span>20%</span></dd>
  <dd><span>0%</span></dd>
</dl>

मुझे यह भी लगता है कि स्क्रीन पाठकों के लिए किंवदंती को अनदेखा करना ठीक है क्योंकि यह एक दृश्य सहायता है:

<figure class="legend" aria-hidden="true">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

अंतिम डेमो

वह एक कवर है!

वहाँ हम जाते हैं, ओवरलैपिंग बार के साथ एक चार्ट! यह डेटा की तुलना करने का एक अच्छा तरीका है और मुझे आशा है कि आप किसी प्रोजेक्ट पर इसके लिए उपयोग पा सकते हैं।

क्या ऐसे अन्य तरीके हैं जिनसे हम संपर्क कर सकते थे? बेशक! यहां हमने जो कुछ भी कवर किया है वह केवल मेरी विचार प्रक्रिया के माध्यम से चल रहा है। मुझे लगता है कि आप में से कुछ लोगों ने एक अलग तरीका अपनाया होगा - अगर वह आप हैं, तो कृपया साझा करें! अन्य सीएसएस लेआउट तकनीकों और अभिगम्यता को बेहतर बनाने के दृष्टिकोण को देखना बहुत अच्छा होगा।