نمودارهای جاوا اسکریپت: محورها

ساخت وبلاگ

هر نوع متناسب با انواع خاصی از داده ها استفاده می شود. یک محور را می توان در هر طرف یک نمودار - "بالا" ، "راست" ، "پایین" یا "سمت چپ" قرار داد. درست مانند سری ، محورها را می توان با تنظیم ویژگی آرایه محورهای مربوطه از یک نمودار مشخص کرد.

محورها فقط در نمودارهای دکارتی پشتیبانی می شوند ، نه قطبی. به عنوان مثال ، شما نمی توانید از محورهای سری PIE استفاده کنید.

محور دسته بندی با استفاده از مجموعه داده های نسبتاً کوچک از ارزش ها یا مقوله های گسسته ، مانند فروش در هر محصول ، شخص یا چهارم ، که در آن محصول ، شخص و چهارم دسته بندی می شوند ، مورد استفاده قرار می گیرد.

محور گروه سعی در ارائه تیک ، برچسب و یک خط شبکه برای هر گروه دارد و همه کنه ها را به طور مساوی از بین می برد.

محور دسته بندی به طور پیش فرض به عنوان محور x استفاده می شود و در پایین نمودار قرار می گیرد.

ساده ترین پیکربندی محور دسته بندی به این شکل است:

نوع: 'دسته بندی',موقعیت: "پایین" >

محور شماره به عنوان یک محور ارزش مورد استفاده قرار می گیرد. در حالی که دسته ها به طور مساوی از هم فاصله دارند ، فاصله بین مقادیر به بزرگی آنها بستگی دارد.

به جای استفاده از یک تیک در هر مقدار ، محور شماره دامنه تمام مقادیر را تعیین می کند ، آن را دور می کند و سعی می کند دامنه گرد را با کنه های مساوی فاصله داشته باشد.

محور شماره به طور پیش فرض به عنوان محور y استفاده می شود ، که در نمودار سمت چپ قرار گرفته است.

در اینجا ساده ترین پیکربندی محور شماره:

نوع: 'عدد',موقعیت: 'ترک کرد' >

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

محور ورود به سیستم از مقیاس ورود به سیستم استفاده می کند ، که در آن همان درصد تغییر در بزرگی باعث فاصله همان پیکسل می شود. به عبارت دیگر ، فاصله پیکسل بین 10 تا 100 و 100 و 1000 یکسان خواهد بود زیرا هر دو دامنه نشان دهنده افزایش درصد یکسان هستند. در حالی که ، اگر از محور تعداد استفاده می شد ، فاصله دوم 10 برابر بزرگتر از حالت اول خواهد بود.

خاصیت فوق از محور ورود به سیستم نیز می تواند در نمودارهای مالی مفید باشد. به عنوان مثال ، اگر نرخ بازده شما در یک سرمایه گذاری با گذشت زمان ثابت بماند ، نمودار ارزش سرمایه گذاری مانند یک خط مستقیم به نظر می رسد.

به طور پیش فرض ، اگر دامنه داده دارای 5 یا بیشتر سفارش از بزرگی باشد ، محور ورود به سیستم سعی در ارائه 5 کنه دارد. در غیر این صورت ، 10 کنه (پایه لگاریتم) در هر ترتیب از بزرگی ارائه می شود. به عنوان مثال یک دامنه داده [1 ، 100] با 2 مرتبه قدر ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10 ، 20 ، 30 ، 40 ، 50 ، 60 ، 70 را نشان می دهد.، 80 ، 90 ، 100.

بسته به دامنه داده و اندازه نمودار ، با استفاده از یک مقدار بزرگتر برای کنه:پیکربندی ممکن است برای کاهش تعداد کنه ها لازم باشد.

نوع: "ورود",موقعیت: 'ترک کرد',تیک زدن: در فاصله زمانی: 200, > >

محور log به طور پیش فرض از لگاریتم مشترک (پایه 10) استفاده می کند. پیکربندی پایه به شما امکان می دهد پایه را به هر شماره مورد نظر خود تغییر دهید ، به عنوان مثال Math. e برای طبیعی یا 2 برای لگاریتم های باینری:

نوع: "ورود",موقعیت: 'ترک کرد',پایه: 2 >

تمام نکات فوق با مثال زیر نشان داده شده است.

مثال: محور شماره در مقابل محور ورود به سیستم

// بارگذاری. 

دامنه یک محور ورود به سیستم باید کاملاً مثبت یا کاملاً منفی باشد (زیرا هیچ نیرویی وجود ندارد که بتوانید یک عدد را به دست آورد تا صفر باشد). به همین دلیل ، هر دامنه غیر سازگار به انطباق می رسد. به عنوان مثال ، [0 ، 10] به [1 ، 10] بریده می شود. اگر دامنه داده از 0 عبور کند ، به عنوان مثال [-10 ، 5] ، هیچ داده ای ارائه نمی شود. غالباً مطلوب است که ویژگی حداقل یا حداکثر محور را به صورت دستی تنظیم کنید. در این حالت می تواند حداکثر باشد: -1.

محور زمان شبیه به محور تعداد است به این معنی که از آن برای ترسیم مقادیر مداوم استفاده می شود. محور زمان حتی می تواند با داده های عددی (علاوه بر اشیاء به تاریخ) استفاده شود ، اما اعداد به عنوان جدول زمانی UNIX تعبیر می شوند. محور زمان با محور شماره در تقسیم بندی تیک و قالب بندی برچسب متفاوت است. به عنوان مثال ، شما می توانید هر 5 دقیقه ، هر ماه یا هر جمعه یک کنه را انتخاب کنید.

محور زمان همچنین از رشته های مشخص کننده برای کنترل نحوه ارائه مقادیر زمان به عنوان برچسب پشتیبانی می کند. به عنوان مثال ، رشته مشخص کننده ٪ H: ٪ M: ٪ S به محور دستور می دهد تا مقدار زمانی مانند تاریخ جدید را قالب بندی کند ('TUE فوریه 04 202 15:08:03') یا 1580828883000 به عنوان '15: 08: 03 '. محورهای زمانی به طور معمول به عنوان محورهای X استفاده می شوند و در پایین نمودار قرار می گیرند. ساده ترین پیکربندی محور زمان به این شکل است:

نوع: 'زمان',موقعیت: "پایین" >

بعضی اوقات ممکن است مشخص نباشد که ابعاد نمودار چه چیزی را نشان می دهد. به عنوان مثال ، شما ممکن است شماره هایی را در محور نمودار مشاهده کنید و نتوانید بگویید که آیا آنها میلی متر ، درصد ، دلار یا چیز دیگری هستند! همچنین می تواند برای ارائه اطلاعات اضافی مفید باشد. به عنوان مثال ، برچسب های محور طبقه بندی می توانند نام افراد را به وضوح نشان دهند ، اما ممکن است ارزش این را داشته باشد که آنها بهترین فروش یک شرکت هستند.

خوشبختانه ، یک محور می تواند عنوانی درست مانند نمودار داشته باشد. در مثال زیر می توانیم از عناوین محور استفاده کنیم تا به این نکته اشاره کنیم:

  • بعد افقی سیستم عامل های دسک تاپ را نشان می دهد
  • ابعاد عمودی سهم بازار آنها را نشان می دهد

لطفاً به گزینه های API برای گزینه های یک ظاهر طراحی شده عنوان AXIS مانند قلم و رنگ مراجعه کنید.

مثال: عنوان محور

// بارگذاری. 

کنه های محور در فواصل در طول هر محور نمایش داده می شوند و همچنین برای تعیین موقعیت و فرکانس برچسب های محور و خطوط شبکه استفاده می شوند.

محورهای دسته بندی برای هر گروه تیک نشان می دهند. تعداد و محورهای زمانی بسته به فضای موجود حدود 5 کنه را نشان می دهد.

با استفاده از یکی از گزینه های زیر می توان این رفتار پیش فرض را سفارشی یا نادیده گرفت.

  • فاصله حداقل و حداکثر - برای کنترل شکاف پیکسل بین کنه ها استفاده می شود
  • فاصله - برای قرار دادن کنه در فواصل منظم استفاده می شود
  • مقادیر - برای قرار دادن کنه در مقادیر مشخص شده استفاده می شود

فاصله حداقل و حداکثر

tick. minspacing و tick. maxspaxing رفتار پیش فرض را با مشخص کردن فاصله تقریبی و حداکثر پیکسل که باید بین کنه وجود داشته باشد ، تغییر دهید. یک یا هر دو گزینه را می توان ارائه داد. تعداد مناسبی از کنه ها برای برآورده کردن محدودیت های Tick. Minspacing و Tick. MaxSpacing ایجاد می شود. این تعداد بسته به اندازه ارائه شده نمودار متفاوت خواهد بود.

تیک زدن: در فاصله زمانی: 50,حداکثر: 200, >

Tick. Interval مقدار مرحله دقیق بین کنه ها است که در واحدهای محور مشخص شده است.

برای محورهای شماره ، خاصیت فاصله باید یک عدد باشد. یک کنه هر مقدار فاصله در محدوده محور نشان داده می شود. به عنوان مثال ، فاصله 30 ، 0 ، 30 ، 60 ، 90 و غیره را نشان می دهد.

تیک زدن: فاصله: 30, >

برای محورهای ورود به سیستم ، خاصیت فاصله باید یک عدد باشد. این برای پله ای که پایه لگاریتم به آن مطرح می شود استفاده می شود. به عنوان مثال ، فاصله 2 نشان می دهد 10^0 ، 10^2 ، 10^4 و غیره.

برای محورهای زمانی ، خاصیت بازه باید یک بازه زمانی مانند زمان باشد. برای نشان دادن کنه هر ماه یا یک بازه حاصل از یکی از فواصل از پیش تعریف شده مانند زمان. ماه.

تیک زدن: فاصله:زمان.ماه, >

سایر فواصل زمانی موجود عبارتند از: سال ، ماه ، روز ، ساعت ، دقیقه ، دوم ، میلی ثانیه. همچنین برخی از فواصل زمانی UTC در دسترس است: UTCYEAR ، UTCMONTH ، UTCDAY ، UTCYEAR ، UTCMINUTE.

اگر خاصیت بازه یک محور زمانی روی تعدادی تنظیم شود ، این به عنوان میلی ثانیه تعبیر می شود.

اگر فاصله پیکربندی شده با توجه به دامنه داده و اندازه نمودار ، به تعداد زیادی کنه منجر شود ، نادیده گرفته می شود و رفتار پیش فرض کنه اعمال می شود.

مثال زیر نشان دهنده استفاده از فواصل زمانی است:

  • Time. month کنه ماهانه تولید می کند.
  • Time. month. Ely (2) برای هر ماه دوم کنه تولید می کند.
نوع: 'زمان',تیک زدن: فاصله:زمان.ماه.هر(2) > >
// بارگذاری. 

Tick. Values می تواند برای پیکربندی آرایه دقیق مقادیر کنه برای نمایش استفاده شود. این یا بسته به نوع محور باید آرایه ای از تعداد ، تاریخ یا مقادیر رشته باشد.

این مقادیر همچنین به عنوان برچسب های تیک مورد استفاده قرار می گیرند مگر اینکه یک برچسب. format یا label. formatter پیکربندی شده باشد.

تیک زدن: ارزش های: [-50, -25, 0, 25, 50], >

مثال: قرار دادن کنه محور

مثال زیر نشان می دهد که چگونه می توان از ویژگی های Tick. Minspacing ، Tick. MaxSpacing ، Tick. Interval و Tick. Values برای کنترل قرار دادن کنه استفاده کرد.

  • دکمه هایی در بالا وجود دارد که بین گزینه های مختلف تغییر می کند.
  • یک دسته چنگک در پایین سمت راست وجود دارد تا بتواند تغییر اندازه نمودار را مشاهده کند تا ببیند که چگونه کنه ها با فضای موجود تغییر می کنند.
// بارگذاری. 

عرض ، اندازه و رنگ کنه های محور نمودار را می توان تنظیم کرد که در مرجع API در زیر توضیح داده شده است. این پیکربندی ها برای همه انواع محور اعمال می شود.

محور برای نشان دادن مقدار تیک ، یک برچسب را در کنار هر تیک قرار می دهد. برچسب های محور نمودار از همان قلم و گزینه های رنگی به عنوان عنوان محور پشتیبانی می کنند. علاوه بر این ، فاصله برچسب ها از کنه ها و چرخش آنها می تواند به ترتیب از طریق خصوصیات بالشتک ، چرخش و اتوروتات پیکربندی شود.

برچسب چرخش و پرش

چرخش برچسب اجازه می دهد تا یک تجارت بین فضای اشغال شده توسط محور ، منطقه سری و خوانایی برچسب های محور ایجاد شود.

سه رویکرد چرخش در دسترس است:

  • بدون چرخشبرچسب های محور x به موازات محور هستند ، برچسب های محور Y عمود هستند.
  • تنظیم چرخش ثابت از محور از طریق خاصیت چرخش.
  • فعال کردن چرخش اتوماتیک از طریق خاصیت autorotate ، و به صورت اختیاری زاویه چرخش از طریق خاصیت autorotateangle. اگر هر برچسب گسترده تر از شکاف بین کنه باشد ، چرخش اعمال می شود.

هنگامی که احتمال برخورد زیاد وجود دارد ، پرش برچسب بطور خودکار انجام می شود. برای غیرفعال کردن این ، Label. AvoidCollings را به False تنظیم کنید:

برچسب: اجتناب از جمع آوری: دروغ > >

اگر Autorotate فعال شود ، قبل از استفاده از برچسب ، ابتدا سعی می شود یک برچسب مناسب پیدا کند. محورهای دسته بندی به طور پیش فرض با autorotateangle پیش فرض 335 به صورت پیش فرض فعال شده اند.

هنگامی که label. avoidcollitions صحیح است ، اگر حداقل 10 px بین آنها نباشد ، برچسب های محور کاهش می یابد. این حداقل فاصله بین برچسب های محور را می توان با استفاده از ویژگی Label. minspacing پیکربندی کرد:

برچسب: در فاصله زمانی: 20 > >

مثال زیر نشان دهنده چرخش و پرش برچسب است:

  • یک دسته چنگک در پایین سمت راست وجود دارد تا بتواند تغییر اندازه نمودار را مشاهده کند تا ببیند که چگونه برچسب ها با فضای موجود تغییر می کنند.
  • در ابتدا هر دو محور به طور پیش فرض اعمال شده اند. محور X یک محور دسته ای است بنابراین Autorotate به طور پیش فرض فعال می شود.
  • ردیف اول دکمه ها در بالا پیکربندی هر دو محور را تغییر می دهد تا همه رفتارهای چرخش مشاهده شود.
  • ردیف دوم دکمه ها امکان جابجایی بین انواع محور x و برچسب ها را فراهم می کند.
// بارگذاری. 

از یک تابع Formatter Label می توان برای تغییر مقدار نمایش داده شده در برچسب استفاده کرد. این یک ویژگی مفید است که شما نیاز به نشان دادن واحدها در کنار مقادیر یا مقادیر شماره فرمت با دقت خاصی دارید.

یک تابع فرمت برچسب یک شیء پارامز واحد را دریافت می کند که شامل:

  • مقدار خام برچسب (بدون قالب بندی پیش فرض اعمال شده)
  • شاخص برچسب در آرایه داده
  • اگر مقدار یک عدد باشد ، تعداد کسری است
  • اگر محور یک محور زمان باشد ، فرم ساز پیش فرض برچسب است

به عنوان مثال ، برای اضافه کردن واحدهای "٪" در کنار مقادیر شماره ، می توانید از عملکرد فرمت زیر استفاده کنید:

سازنده: تابع(پارامت)  برگشتپارامت.ارزش+ '%'; >
// بارگذاری. 

رشته شماره برچسب برچسب

برای محورهای شماره ، می توان یک رشته فرمت را فراهم کرد که برای قالب بندی اعداد برای نمایش به عنوان برچسب های محور استفاده می شود. رشته فرمت ممکن است شامل دستورالعمل های زیر باشد ، که منعکس کننده آن از مشخصات فرمت پایتون است:

  • پر کردن - می تواند هر شخصیتی باشد.
  • تراز:
    • >- این زمینه را مجبور می کند تا در فضای موجود (پیش فرض) به سمت راست تنظیم شود.
    • < Forces the field to be left-aligned within the available space.
    • ^ - این زمینه را مجبور می کند تا در فضای موجود متمرکز شود.
    • = - Like>، اما با هر علامت و نمادی از سمت چپ هر نوع بالشتک.
    • - - هیچ چیز برای صفر یا مثبت و یک علامت منفی برای منفی (پیش فرض).
    • + - یک علامت به علاوه برای صفر یا مثبت و یک علامت منفی برای منفی.
    • ( - هیچ چیز برای صفر یا مثبت و پرانتز برای منفی نیست.
    • - فضایی برای صفر یا مثبت و یک علامت منفی برای منفی.
    • $ - نماد ارزی $ را اعمال کنید
    • # - برای نماد باینری ، اکتال یا شش ضلعی ، پیشوند به ترتیب با 0B ، 0O یا 0x.
    • ٪ - 100 برابر با 100 ضرب و شتم با علامت درصد.
    • ب - نماد باینری ، گرد به عدد صحیح.
    • C - قبل از چاپ ، عدد صحیح را به شخصیت یونیکد مربوطه تبدیل می کند.
    • D - نماد اعشاری ، گرد به عدد صحیح.
    • E - نماد نمایشی.
    • F - نماد نقطه ثابت.
    • G - یا اعشاری یا نماد نمایشی ، گرد به رقم های قابل توجه.
    • o - نماد اکتال ، گرد به عدد صحیح.
    • P - ضرب 100 ، دور به رقم های قابل توجه ، و سپس نماد اعشاری با علامت درصد.
    • R - نماد اعشاری ، گرد به رقم های قابل توجه.
    • S - نماد اعشاری با پیشوند SI ، گرد به رقم های قابل توجه.
    • X - نماد شش ضلعی ، با استفاده از حروف کمتری ، گرد به عدد صحیح.
    • X - نماد شش ضلعی ، با استفاده از حروف بزرگ ، گرد به عدد صحیح.

    اگر می خواهید در وسط برخی از رشته ها مقدار فرمت شده داشته باشید ، باید آن را در # بپیچید<> , so that it's clear where the number format begins and ends. For example: I'm #2.0f>ساله .

    The label config of the left axis in the example below uses the ' منصة التداول الأكثر ثقة...

    ما را در سایت منصة التداول الأكثر ثقة دنبال می کنید

    برچسب : نویسنده : احمد نجفی بازدید : <-PostHit-> تاريخ : جمعه 20 مرداد 1402 ساعت: 1:06