בניית תרשים עמודות ב-CSS
בניית תרשים עמודות ב-CSS
לא כל ויזואליזציה צריכה ספריית תרשימים כבדה. בהרבה דשבורדים, כמה divs מעוצבים יוצרים תרשים עמודות חד, מהיר לטעינה ונתון לשליטתכם המלאה.
בשיעור הזה תבנו תרשים עמודות אנכי מ-HTML פשוט ו-Tailwind. כל עמודה היא בסך הכול div צבעוני שגובהו ממופה לערך שלה, ומקרא קושר בין הצבעים למשמעות שלהם.
בתור אנליסטים, הטכניקה הזו שווה זהב: אפשר לשבץ תרשים נקי בכל דוח בלי תלויות, ואתם מבינים בדיוק איך כל פיקסל ממופה לנתונים שלכם. בואו נצייר כמה עמודות.
הוראות
הוסיפו כותרת h1 לתרשים — "הכנסות רבעוניות" — כדי שהצופים יידעו מה העמודות מייצגות.
רמז: השתמשו ב: `<h1 class="text-3xl font-bold mb-2">הכנסות רבעוניות</h1>`.
איפה כותבים את זה?
<!-- בנו כאן את ויזואליזציית תרשים העמודות שלכם -->כתבו את זה בשורה 11 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.
צרו את אזור השרטוט של התרשים כשורת flex שהעמודות בה יושבות על קו בסיס בעזרת items-end.
הוסיפו עמודות צבעוניות כ-divs עם סגנון height בתוך style, בצבע bg-purple-500.
הוסיפו מקרא שמסביר את הצבעים, כולל התווית "רבעון שיא".
הקוד שלכם
אני אבנה עבורכם את השלב. אין צורך לכתוב או להבין קוד — אפשר להשתמש בכפתור המודרך או לתאר במילים מה תרצו. השלב הזה: הוסיפו כותרת h1 לתרשים — "הכנסות רבעוניות" — כדי שהצופים יידעו מה העמודות מייצגות.