إنشاء مخطط صور مخطط

مقدمة

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

يتم إنشاء هذه المواضع الرائجة باستخدام عنصرَي HTML <map> و<area>. بإمكان Chart API عرض جميع الإحداثيات اللازمة لإنشاء خريطة نقطة الاتصال، كما هو موضّح أدناه.

إنشاء خريطة للمخطط

إذا أضفت المَعلمة chof=json إلى عنوان URL الخاص بالرسم البياني، ستتلقّى سلسلة JSON تتضمن جميع البيانات التي تحتاجها لإنشاء خريطة صورة للرسم البياني. يمكنك بعد ذلك إضافة روابط إلى أقسام معيّنة من الرسم البياني أو إرفاق دوال JavaScript للنقر على الأحداث لجعل الرسم البياني أكثر تفاعلية. يُرجى العلم أنّ هذا الإجراء لا يتيح جميع أنواع الرسوم البيانية. يمكنك الاطّلاع على التفاصيل في المستندات الخاصة بالرسم البياني.

ستساعدك الأداة الموجودة في هذه الصفحة في إنشاء HTML لمخطط صورة. يمكنك تضمين رمز HTML هذا في صفحتك بشكل دائم أو نسخ الرمز إلى صفحتك، ثم طلب الخريطة وإنشائها بسرعة إذا كانت صفحتك تتيح للمستخدم تغيير الخريطة على الصفحة بشكل ديناميكي.

إليك كيفية استخدام هذه الأداة لإنشاء خريطة:

1. الحصول على ناتج JSON للرسم البياني: أضِف chof=json إلى عنوان URL الخاص بالرسم البياني، وتصفَّح للوصول إلى عنوان URL هذا في المتصفّح، وانسخ النص المعروض.
2. الصق نص JSON الذي نسخته في مربع النص أدناه الذي تم تمييزه بـ "مخرجات JSON" وانقر على "إنشاء خريطة".
3. لصق رمز الخريطة الذي تم إنشاؤه في صفحتك
4. عدِّل الرمز الذي تم إنشاؤه باستخدام اسم فريد للعنصر <map>.
5. أزِل أي عناصر لا تحتاج إليها في الخريطة (على سبيل المثال، أشرطة أو شرائح أو تصنيفات أو عناصر محور معيّنة).
6. عدِّل سمات href في عناصر <area> التي تم إنشاؤها.
7. أضِف السمة usemap="#MAP_NAME" إلى العنصر <img>، مع استبدال اسم خريطتك بـ MAP_NAME.

   ملاحظة مهمة: تأكَّد من أنّ قيمة usemap بادئة بعلامة "#"، على سبيل المثال: usemap="#mymap". في هذه الحالة، يكون اسم الخريطة "mymap" وليس "#mymap".

تنسيق سلسلة JSON

في ما يلي تنسيق JSON الذي يتم عرضه عند تحديد chof=json:

• كائن جذر يسمى chartshape. يحتوي هذا الكائن على مصفوفة من العناصر، يمثّل كل منها منطقة واحدة في خريطة مصوّرة للرسم البياني. ولكل كائن السمات التالية:
  • name - اسم لهذه المنطقة تحديدًا. اصطلاح التسمية العام هو elementtype_series#_item#. على سبيل المثال: bar0_0 لمساحة تصف الشريط الأول في السلسلة الأولى، أو المحور0_1 لمنطقة تصف تصنيف المحور الثاني على المحور x.
  • type - شكل هذه المنطقة. وستكون إحدى القيم التالية، استنادًا إلى نوع الرسم البياني: RECT أو Circle أو POLY. ويعادل ذلك سمة الشكل للعلامة <area>.
  • coords - مصفوفة رقمية تصف المنطقة، يعادل السمة coords للعلامة <area>.