ایجاد نقشه تصویر نمودار

معرفی

استانداردهای HTML شما را قادر می سازد تا نقاط داغ را در یک تصویر صفحه وب با استفاده از نقشه تصویر مشخص کنید. از این نقاط داغ می‌توان برای نمایش متن معلق یا پیوند استفاده کرد، یا حتی می‌توانید مدیریت رویداد جاوا اسکریپت را برای فعال کردن تعامل اضافه کنید. به عنوان مثال، ماوس خود را روی نوارها و برچسب های محور تصویر زیر ببرید:

این نقاط داغ با استفاده از عناصر HTML <map> و <area> ساخته می شوند. Chart API می‌تواند تمام مختصات مورد نیاز برای ایجاد یک نقشه نقطه داغ را برگرداند، همانطور که در ادامه توضیح داده شد.

ایجاد نقشه برای نمودار شما

اگر پارامتر chof=json به URL نمودار خود اضافه کنید، یک رشته JSON دریافت خواهید کرد که شامل تمام داده هایی است که برای ایجاد یک نقشه تصویری برای نمودار خود نیاز دارید. سپس می‌توانید پیوندهایی را به بخش‌های خاصی از نمودار خود اضافه کنید یا توابع جاوا اسکریپت را برای کلیک روی رویدادها وصل کنید تا نمودار شما تعاملی‌تر شود. توجه داشته باشید که همه انواع نمودار این را پشتیبانی نمی کنند. برای جزئیات بیشتر به اسناد نمودار خاص خود مراجعه کنید.

ابزار موجود در این صفحه به شما کمک می کند تا HTML نقشه تصویر را ایجاد کنید. می‌توانید این HTML را به‌طور دائم در صفحه خود جاسازی کنید، یا حتی می‌توانید کد ما را در صفحه خود کپی کنید، و سپس نقشه را در لحظه درخواست و تولید کنید، اگر صفحه شما به کاربر امکان می‌دهد نقشه صفحه را به صورت پویا تغییر دهد.

در اینجا نحوه استفاده از این ابزار برای تولید نقشه آورده شده است:

1. خروجی JSON را برای نمودار خود دریافت کنید: chof=json به URL نمودار خود اضافه کنید، آن URL را در مرورگر خود مرور کنید و متن برگشتی را کپی کنید.
2. متن JSON را که کپی کرده اید در کادر متنی زیر با علامت "JSON Output" قرار دهید و روی "Make Map" کلیک کنید.
3. کد نقشه ایجاد شده را در صفحه خود قرار دهید
4. کد تولید شده را با یک نام منحصر به فرد برای عنصر <map> خود به روز کنید.
5. عناصر نقشه را که به آن نیاز ندارید (به عنوان مثال، نوارها، برش ها، برچسب ها یا عناصر محوری خاص) حذف کنید .
6. ویژگی های href را در عناصر <area> ایجاد شده به روز کنید.
7. ویژگی usemap="# MAP_NAME " به عنصر <img> خود اضافه کنید و نام نقشه خود را جایگزین MAP_NAME کنید.

   مهم: حتما پیشوند مقدار usemap را با '#' قرار دهید. به عنوان مثال: usemap="#mymap" . در این مورد، نام نقشه "mymap" است نه "#mymap".

فرمت رشته JSON

در اینجا فرمت JSON است که با تعیین chof=json بازگردانده می شود:

• یک شی ریشه به نام نمودار شکل . این شی آرایه ای از اشیاء را در خود جای می دهد که هر کدام یک ناحیه را در نقشه تصویری نمودار نشان می دهند. هر شی دارای ویژگی های زیر است:
  • name - نامی برای این منطقه خاص. قرارداد کلی نامگذاری عنصر نوع _ سری# _ آیتم# است. برای مثال: bar0_0 برای ناحیه‌ای که اولین نوار را در سری اول توصیف می‌کند، یا axis0_1 برای ناحیه‌ای که برچسب محور دوم را در محور x توصیف می‌کند.
  • نوع - شکل این ناحیه. بسته به نوع نمودار، یکی از مقادیر زیر خواهد بود: RECT، CIRCLE، یا POLY. این معادل ویژگی shape تگ <area> است.
  • coords - یک آرایه عددی که منطقه را توصیف می کند. معادل صفت coords تگ <area> است.