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

المقدّمة

تتيح لك معايير 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>.