תרשימי עמודות חופפים

כפי שהשם מרמז, תרשימים חופפים מדמיינים שתי קבוצות שונות של נתונים בתרשים יחיד. הרעיון הוא שהפסים החופפים מאפשרים לנו להשוות נתונים, למשל, משנה לשנה. הם גם שימושיים עבור דברים כמו מעקב אחר התקדמות עבור יעד כאשר פס אחד מייצג את המטרה והשני מציג את הסכום הנוכחי.

אבל הם גם יפים!

המוח שלך כנראה דומה לשלי וכבר מתחיל להבין איך אתה הולך ומקודד את זה. הנה איך התמודדתי עם זה.

ה- 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 הוא המקום שבו הנתונים מוצגים ועשיתי רשימת הגדרות כדי לבנות גם את ציר ה-x. כל פריט ברשימה מכיל א .bar והתווית כמונח תיאור (dt).

ומה נסגר עם הנתונים תכונה? ה data-percentage משמש לציון גובה הפס, המייצג בסופו של דבר את ערכו על ציר ה-y. נוכל להגדיר את זה ידנית ב-CSS עבור כל סרגל, אבל זה חוזר על עצמו והרבה קוד נוסף שניתן להחליף בכמה שורות של CSS.

סגנונות התרשים הבסיסיים

אנחנו עובדים עם הרבה כיוונים דו מימדיים, אז פלקסבוקס הולך להיות החבר שלנו לסדר הכל. אנחנו יכולים לעשות את .chart אלמנט מיכל גמיש הממקם את תוויות ציר ה-y ואת התרשים זה לצד זה ב- row כיוון.

.chart {
  display: flex;
}

אנחנו אפילו לא צריכים לציין את הכיוון מכיוון ש-flexbox מוגדר כברירת מחדל row. בוא נעשה את זה ואז נוסיף את flexbox לרשימת התוויות לאורך ציר ה-y בעודנו בזה מכיוון שאנו יודעים שאלו יפעלו ב- 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 האנכי. אולי אתה גם זוכר שנתנו לכל בר א data-percentage attribute - אנחנו הולכים לפזר קצת JavaScript שקובע את הגובה של כל סרגל באמצעות הערכים האלה.

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

זה הטבלה הבסיסית שלנו!

אנחנו רוצים להביא את זה למקום שבו אנחנו יכולים לראות את הסורגים חופפים זה לזה. זה הדבר הבא!

סורגים חופפים

הטריק לגרום לבר אחד לחפוף לאחר הוא מצחיק כי אנחנו מנסים לעתים קרובות למנוע דברים מחפיפה ויזואלית ב-CSS. אבל במקרה הזה, אנחנו באמת רוצים שזה יקרה.

הסורגים כבר חופפים; פשוט קשה לומר. שימו לב ב-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 ורקע (#fff ו #333יחס: 12.63:1)

טאבינג בין הסורגים

כדי להשיג זאת, כאשר משתמשי המקלדת יכולים לבחור כל סרגל בודד עם ה- Tab מפתח, נוכל להגיע ל-HTML tabindex תְכוּנָה. אנו יכולים להשתמש ב-JavaScript הבא בתוך הפונקציה for-each כדי להוסיף מאפיין זה לכל סרגל (שניהם). נגדיר את אינדקס הכרטיסיות ל 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>

ההדגמה הסופית

סיימנו!

הנה, תרשים עם פסים חופפים! זוהי דרך נחמדה להשוות נתונים ואני מקווה שתוכל למצוא לה שימוש בפרויקט כלשהו.

האם יש דרכים אחרות שיכולנו לגשת לזה? כמובן! כל מה שסיקרנו כאן רק מוביל אותך בתהליך המחשבה שלי. אני מתאר לעצמי שחלק מכם היו נוקטים בגישה אחרת - אם זה אתם, אנא שתפו! זה יהיה נהדר לראות טכניקות אחרות של פריסת CSS ונקודות מבט לגבי בניית הנגישות.