اوور لیپنگ بار چارٹس

جیسا کہ نام سے پتہ چلتا ہے، اوور لیپنگ چارٹس ایک ہی خاکہ میں ڈیٹا کے دو مختلف سیٹوں کو تصور کرتے ہیں۔ خیال یہ ہے کہ اوور لیپنگ بارز ہمیں ڈیٹا کا موازنہ کرنے کی اجازت دیتے ہیں، کہتے ہیں، سال بہ سال۔ یہ ان چیزوں کے لیے بھی کارآمد ہیں جیسے کسی مقصد کے لیے پیشرفت کو ٹریک کرنا جہاں ایک بار ہدف کی نمائندگی کرتا ہے اور دوسرا موجودہ رقم کو ظاہر کرتا ہے۔

لیکن وہ بھی خوبصورت ہیں!

آپ کا دماغ شاید میری طرح ہے اور آپ پہلے ہی یہ جاننا شروع کر رہے ہیں کہ آپ کیسے جائیں گے اور اسے کوڈ کریں گے۔ یہاں ہے کہ میں نے اس سے کیسے نمٹا۔

ایچ ٹی ایم ایل

ہم مارک اپ کے ساتھ شروع کرنے جا رہے ہیں کیونکہ، ٹھیک ہے، اس طرح ہم جانتے ہیں کہ اسٹائلنگ کی کیا ضرورت ہے۔

<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 وہ جگہ ہے جہاں ڈیٹا کو تصور کیا جاتا ہے اور میں نے ایکس محور بنانے کے لیے ایک تعریف کی فہرست بھی بنائی ہے۔ ہر فہرست آئٹم پر مشتمل ہے a .bar اور لیبل بطور وضاحتی اصطلاح (dt)۔

اور ڈیٹا کا کیا حال ہے۔ وصف؟ The data-percentage بار کی اونچائی بتانے کے لیے استعمال کیا جا رہا ہے، جو بالآخر y-axis پر اس کی قدر کی نمائندگی کرتا ہے۔ ہم اسے دستی طور پر ہر بار کے لیے CSS میں سیٹ کر سکتے ہیں، لیکن یہ بار بار ہوتا ہے اور بہت زیادہ اضافی کوڈ ہوتا ہے جسے CSS کی چند لائنوں سے تبدیل کیا جا سکتا ہے۔

بنیادی چارٹ شیلیوں

ہم بہت ساری دو جہتی سمتوں کے ساتھ کام کر رہے ہیں، لہذا flexbox ہر چیز کو ترتیب دینے کے لیے ہمارا دوست بننے جا رہا ہے۔ ہم بنا سکتے ہیں۔ .chart ایک لچکدار کنٹینر کا عنصر جو y-axis کے لیبلز اور چارٹ کو ایک دوسرے کے ساتھ row سمت

.chart {
  display: flex;
}

ہمیں سمت کی وضاحت کرنے کی بھی ضرورت نہیں ہے کیونکہ flexbox پہلے سے طے شدہ ہے۔ row. آئیے ایسا کرتے ہیں اور پھر flexbox کو y-axis کے ساتھ موجود لیبلز کی فہرست میں شامل کریں جب کہ ہم اس پر موجود ہیں کیونکہ ہم جانتے ہیں کہ یہ column سمت

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

یقین کریں یا نہ کریں، ہم بارز کے لیے دوبارہ flexbox استعمال کر سکتے ہیں کیونکہ وہ بھی a میں چل رہے ہیں۔ 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. یقینی بنائیں کہ اسکرین ریڈرز مواد کا اعلان کرتے ہیں۔

رنگ کے تضادات

ہمیں اس کے درمیان کافی تضاد کی ضرورت ہے:

• اوورلیپنگ سلاخوں
• بارز اور چارٹ کا پس منظر
• لیبل کا متن اور پس منظر

میں نے ان رنگوں پر پہلے سے تھوڑا سا ہوم ورک کیا جو میں نے اب تک کی مثالوں میں استعمال کیے ہیں، اس بات کو یقینی بناتے ہوئے کہ کافی ہے پیش منظر اور پس منظر کے درمیان تضاد WCAG AA تعمیل حاصل کرنے کے لیے۔

یہ ہے جو میں استعمال کر رہا ہوں:

• اوور لیپنگ بارز: (#25DEAA اور #696969: 3.16:1 تناسب)
• بارز اور چارٹ کا پس منظر (#696969 اور #111: 3.43:1 تناسب)
• Y-axis لیبل کا متن اور پس منظر (#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-axis لیبلز کو پڑھنے سے روک سکتے ہیں۔ ایسا نہیں ہے کہ صارف معلومات سے محروم ہے، کیونکہ ہر بار کے لیے اصل فیصد پہلے ہی دستیاب اور اعلان کیا گیا ہے۔ ہم استعمال کر سکتے ہیں 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>

آخری ڈیمو

یہ ایک لپیٹ ہے!

ہم وہاں جاتے ہیں، اوورلیپنگ سلاخوں کے ساتھ ایک چارٹ! ڈیٹا کا موازنہ کرنے کا یہ ایک اچھا طریقہ ہے اور مجھے امید ہے کہ آپ کسی پروجیکٹ پر اس کا استعمال تلاش کر سکتے ہیں۔

کیا دوسرے طریقے ہیں جن سے ہم اس تک پہنچ سکتے ہیں؟ بلکل! ہر چیز جس کا ہم نے یہاں احاطہ کیا ہے وہ صرف آپ کو میرے سوچنے کے عمل سے گزر رہا ہے۔ میں تصور کرتا ہوں کہ آپ میں سے کچھ نے مختلف انداز اختیار کیا ہوگا — اگر یہ آپ ہیں، تو براہ کرم اشتراک کریں! دیگر CSS لے آؤٹ تکنیکوں اور رسائی کو کیل لگانے کے تناظر میں دیکھنا بہت اچھا ہوگا۔