عنصر المخطط الشريطي

أشرطة عمودية أو أفقية لمقارنة القيم عبر الفئات — المخطط الأساسي للإجابة عن سؤال «أيّها أكبر»، بعرض يصل إلى 3 سلاسل.

آلية العمل

يُعرض المخطط كصورة PNG واحدة يولّدها الخادم (دون مكتبة مخططات تعمل في المتصفح، ودون JavaScript) مع جدول بيانات HTML مرئي دائمًا أسفلها مباشرة يكرّر كل رقم ترسمه الصورة. ليس الجدول بديلًا مُلحقًا من أجل تطبيقات البريد المعطوبة — إنه الأرقام نفسها الموجودة في الصورة، بلغة HTML عادية، وهو ما يجعل المخطط قابلًا للاستخدام في تطبيقات البريد النصية فقط، وفي البريد الوارد الذي يحظر الصور، ومع قارئات الشاشة.

تُكتب البيانات صفوفًا: عمود الفئة واحد إضافة إلى ما يصل إلى ثلاثة أعمدة رقمية للسلاسل. السلسلة 1 نشطة دائمًا — فالمخطط الشريطي ذو السلسلة الواحدة لا يحتاج إلى اسم خاص لسلسلته، لأن عنوان العنصر نفسه يعرّف بها أصلًا.

لا تُفعَّل السلسلتان 2 و3 إلا بعد أن تمنحهما اسمًا في اسم السلسلة 2 / اسم السلسلة 3. ويُتجاهل عمود القيم المملوء جزئيًا الذي لا اسم لسلسلته بدلًا من أن يظهر شريطًا شبحيًا بلا تسمية، فلا تتسرّب البيانات المملوءة جزئيًا إلى المخطط المعروض أبدًا. تحصل كل سلسلة نشطة على لونها الخاص، إما باختيارك لكل سلسلة وإما من لوحة الألوان الفئوية للمشروع. ولا يظهر مفتاح المخطط (عيّنة لونية + تسمية) إلا عند وجود سلاسل نشطة عددها 2 أو أكثر — فالسلسلة المنفردة يسمّيها عنوان المخطط نفسه أصلًا، ومفتاح من عنصر واحد سيكون زائدًا عن الحاجة.

حتى نحو 8 فئات، يحصل كل شريط على تسمية قيمة مباشرة مرسومة عليه أو فوقه في الصورة نفسها، إضافة إلى جدول البيانات. وبعد تجاوز هذا الحد يتخلّى المخطط عن التسميات على كل شريط لصالح محور قيم مشترك مع خطوط شبكية. فمحاولة وضع تسمية قيمة على كل شريط من اثني عشر شريطًا أو أكثر تفقد وضوحها قبل ذلك بكثير. لذا يتولّى المحور دور القراءة السريعة، ويصبح جدول البيانات المصدر الدقيق للأرقام بالضبط. والحد الأقصى للمخطط 24 فئة إجمالًا؛ وأي فئة مكتوبة بعد ذلك لا تُرسم ببساطة (ولا يعكس جدول البيانات إلا ما رُسم فعلًا).

الأشرطة الأفقية تقلب محور الفئات ليمتد من الأعلى إلى الأسفل بدلًا من اليسار إلى اليمين. اختر هذا الخيار عندما تكون أسماء الفئات طويلة أو كثيرة — فالتسميات الأفقية لا تحتاج إلى تدوير أو اقتطاع كما تحتاج تسميات المحور العمودي.

الحقول القابلة للضبط:

• عنوان المخطط — يظهر فوق الصورة؛ وهو أيضًا الاسم البديل للسلسلة عندما تكون السلسلة 1 وحدها نشطة.
• مفتاح تبديل الأشرطة الأفقية.
• البيانات — قائمة الصفوف (الفئة + السلسلة 1/2/3).
• اسم السلسلة 1/2/3 ولون السلسلة 1/2/3.
• لون الخلفية، والحشو، والحدّ، واستدارة الزوايا للبطاقة.
• أزواج مستقلة من اللون/حجم الخط للعنوان ولنص مفتاح المخطط/الجدول.

يمكن للمخطط الشريطي أيضًا ربط صفوفه بمصدر بيانات متصل بدلًا من كتابتها مباشرة. يحوّل حقل التجميع حسب كل قيمة مميّزة إلى فئة، ويقترن بما يصل إلى 3 حقول للسلاسل — لكل منها دالة تجميع خاصة (المجموع، أو المتوسط، أو العدد، أو آخر صف) — على غرار الشكل نفسه القائم على ما يصل إلى 3 سلاسل المتّبع في الصفوف المكتوبة يدويًا. ويمكن لعامل تصفية اختياري الإشارة إلى وسوم الدمج الخاصة بالمستلم، فيعرض العنصر نفسه لكل مستلم شريحته الخاصة من مصدر مشترك. راجع ربط المخططات ببيانات حقيقية لمعرفة التفاصيل الكاملة، بما في ذلك وضع نتائج ردود الحملة.

أمثلة

يضيف غرض المشروع لوحة المعلومات مخططًا شريطيًا تلقائيًا، أسفل صف من ثلاث بطاقات لمؤشرات الأداء مباشرة — نقطة انطلاق بنقرة واحدة لتقرير متكرر؛ راجع الإعداد المسبق «شبكة لوحة المعلومات». يمكن لملخّص مبيعات أسبوعي أن يعرض الإيرادات حسب المنطقة في ثلاث أو أربع فئات بسلسلة واحدة، أو «هذا الأسبوع مقابل الأسبوع الماضي» كسلسلتين لكل فئة لمقارنة مباشرة. وقد يستخدم تقرير ما بعد الفعالية أشرطة أفقية لـ«تأكيدات الحضور حسب الفريق» عندما تكون هناك اثنا عشر اسم فريق أطول من أن تتسع كتسميات على المحور العمودي. ويمكن لملخّص تقدّم في قطاع التعليم أن يعرض متوسط درجات الاختبار حسب الشعبة الدراسية، بشريط واحد لكل شعبة، مربوطًا مباشرة بمصدر بيانات فتبقى الأرقام محدّثة في كل مرة يخرج فيها الإرسال المتكرر.

كيف يبدو البديل الثابت

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Revenue by region</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Revenue</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
    </tr>
  </table>
</div>

يحمل <img> نصًّا بديلًا وصفيًا يلخّص كل قيمة لكل فئة/سلسلة، ويكرّر الجدول أسفله الأرقام نفسها بلغة HTML عادية مرئية دائمًا.

انظر أيضًا

• عناصر التحليلات والمخططات
• ربط المخططات ببيانات حقيقية
• المخطط الخطي / المساحي