MailInApp
Documentation menu

عنصر الخريطة الشجرية

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

آلية العمل

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

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

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

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

  • عنوان المخطط — نص عنوان اختياري فوق المخطط.
  • البيانات — قائمة الصفوف: تسمية الفئة، وقيمة رقمية، واستبدال اختياري لـاللون لكل مربع.
  • لون الخلفية، والحشو، والحد، واستدارة الزوايا للبطاقة.
  • لون/حجم العنوان ولون/حجم مفتاح المخطط — تنسيق نص العنوان ونص مفتاح المخطط والجدول أسفل الصورة.

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

أمثلة

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

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

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

يوضّح النص البديل قيمة كل مربع وحصته من الإجمالي؛ ويكرّر الجدول أسفله الأرقام نفسها بلغة HTML قابلة للتحديد، بما في ذلك أي مربع «أخرى» مدموج.

انظر أيضًا