آناتومی نمودار XY

ما از نمودار XY برای ترسیم هر نوع داده های سریال 2/3 بعدی ، از جمله خط ، منطقه ، ستون ، نوار ، شمعدان ، OHLC ، استیلین ، حتی نقشه های گرما استفاده می کنیم. در اصل ، هر داده ای که به 2 بعد نیاز داشته باشد می تواند با استفاده از نمودار XY نشان داده شود. این آموزش شما را از طریق اصول راهنمایی می کند.

ایجاد نمودار XY

قبل از اینکه بتوانیم هر کاری انجام دهیم ، باید یک شیء نمودار ایجاد کنیم که در این حالت نمونه ای از کلاس Xychart.

نمودار XY ، حداقل به موارد زیر نیاز دارد:

1. نمودار نمونه ؛
2. داده ها؛
3. حداقل دو محور - عمودی و افقی ؛
4. حداقل یک سری.

این آموزش همه اینها را طی خواهد کرد.

وارد کردن ماژول/اسکریپت

نیازی به گفتن نیست ، قبل از اینکه بتوانید از ماژول ها/اشیاء استفاده کنید ، باید اطمینان حاصل کنید که تمام ماژول های مورد نیاز (در TypeScript) یا پرونده ها (در JavaScript) وارد می شوند. لطفاً برای اطلاعات بیشتر به مقاله های شروع شده ما مراجعه کنید:

برای نمودار XY ، ما باید ماژول های هسته (ماژول اصلی) و نمودارها را وارد کنیم.

ما در این مقاله به عنوان AM4Core و AM4Charts این موارد را وارد می کنیم و به آنها مراجعه می کنیم و بیش از حد در نسخه های نمایشی و آموزش های خود قرار می دهیم.

ایجاد نمونه نمودار

برای همین ما قصد داریم از عملکرد Am4Core. Create () استفاده کنیم.(یا am4core. createfromconfig () اگر از رویکرد پیکربندی مبتنی بر JSON استفاده می کنید)

توجه داشته باشید که یک نظر ویژه در مورد تنظیمات مبتنی بر JSON در این مقاله وجود دارد. در ادامه بخوانید

درست مانند اکثر انواع نمودار ، داده های نمودار XY مجموعه ای از اشیاء است. هر یک از این اشیاء یک مورد داده را نشان می دهند و باید حداقل دو مقدار داشته باشند زیرا نمودار XY داده ها را در دو بعد ترسیم می کند.

نمودار XY از هر نوع داده های بعدی پشتیبانی می کند. این می تواند مقوله های مبتنی بر رشته ، مقادیر عددی ، تاریخ و غیره باشد. شما می توانید هر یک از این موارد را با هم مخلوط کرده و مطابقت دهید.

داده های درون خطی

ما داده ها را به داده ها به ویژگی داده های نمودار اختصاص می دهیم:

داده های خارجی

ما همچنین می توانیم با استفاده از DataSource ، داده های خارجی را بارگذاری کنیم.

اطلاعات بیشتر لطفاً برای اطلاعات بیشتر به مقاله "داده های خارجی" ما مراجعه کنید.

سفارش داده های مبتنی بر تاریخ

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

همانطور که قبلاً در این مقاله ذکر شد ، برای عملکرد نمودار XY ، باید حداقل دو محور داشته باشد - یک عمودی (y) و یک افقی (X) ، از این رو عنوان XY.

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

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

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

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

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

ایجاد محورها

هر نمودار XY دارای دو ویژگی لیست است: Xaxes و Yaxes.

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

بیایید بگوییم ، بنا به مثال تاریخ قبلی ، ما می خواهیم داده هایی را که اسامی مبتنی بر رشته (کشورها) به صورت افقی و مقادیر عددی (لیتر) به صورت عمودی ترسیم می کنیم.

ما باید نمونه ای از رده بندی ایجاد کنیم و آن را به XAXES و همچنین نمونه ای از ValueAxis برای فشار دادن به Yaxes سوق دهیم.

توجه داشته باشید ، DataFields در تعریف رده. این نوع محور به گونه ای خاص است که نیاز به دسترسی به داده ها دارد (به طوری که بتواند لیستی از دسته ها را استخراج کند). DataFields دستور می دهد که کدام خاصیت در اشیاء داده دارای نام دسته بندی است.

تنظیم محورها

ما می توانیم با تنظیم خصوصیات آنها ، محورها را دقیقاً مانند هر شیء دیگر پیکربندی کنیم.

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

به عنوان مثال ، اگر می خواهیم عنوان محور را اضافه کنیم ، می خواهیم از ویژگی عنوان آن استفاده کنیم ، که اتفاقاً نمونه ای از برچسب است. بنابراین ما در واقع باید عنوان را تنظیم کنیم. متن:

اطلاعات بیشتر در مورد محورها

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

انواع محور نمودار XY

نمودار XY می تواند از هر ترکیبی از انواع محور زیر استفاده کند:

برچسب های دسته بندی مانند داده ها نمایش داده می شوند.

برچسب ها را مطابق با مدت زمان آن قالب بندی می کند.(اطلاعات بیشتر در مورد Formatters)

سلسله

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

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

ایجاد سریال

یک سری توسط یک کلاس سری نمایش داده می شود. بسته به آنچه ما باید نشان دهیم ، و چه داده هایی را داریم که ممکن است یک کلاس مربوط به سری یا کلاس دیگری را انتخاب کنیم.

مانند سایر انواع نمودار ، سری XY نمودار در لیستی که از طریق ویژگی سری قابل دسترسی است ، برگزار می شود.

برای ایجاد یک سری جدید ، ما فقط نمونه ای از سری Push () آن را در لیست سری نمودار ایجاد می کنیم.

بیایید سعی کنیم یک سری برای نمودار ستون ایجاد کنیم ، که اتفاق می افتد توسط کلاس ستون ها نمایش داده می شود.

سری اتصال به داده ها

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

Fieldfields Series 'DataFields دقیقاً برای آن استفاده می شود.(اطلاعات بیشتر در مورد قسمتهای داده سری)

باز هم ، با ایجاد نمونه داده های ما در ادامه این مقاله ، می دانیم که سری ستون ما باید دسته هایی را از زمینه "دسته" دریافت کند تا در محور افقی (x) مورد استفاده قرار گیرد و مقدار عددی از "لیتر" برای استفاده در عمودی (استفاده شود. y) محور.

انواع مهم سری و داده های مختلف به قسمتهای مختلف داده نیاز دارند.

بیایید بگوییم که آیا ما به جای طبقه بندی ، یک dateaxis داشتیم. ما نیاز به تنظیم Datex به جای رده بندی داریم.

به همین ترتیب ، برای برخی از سریال هایی مانند CandleStickSeries ، ما به بیش از یک قسمت برای ارزش نیاز خواهیم داشت. برای مقادیر باز ، بالا ، کم و نزدیک به قسمتهای داده نیاز دارد.

پیکربندی سری

اکنون که سری به داده ها محدود شده ایم ، می توانیم از خصوصیات آنها برای پیکربندی ظاهر سری و خصوصیات مرتبط استفاده کنیم.

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

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

یا ، ما می توانیم تنظیمات بصری سری را مشخص کنیم - برخی از طریق خصوصیات مستقیم ، برخی از طریق الگوها.

همه موارد فوق در مقاله سری مورد بحث قرار گرفته است. ما فقط یک مثال کوچک را در اینجا می گذاریم تا این خارش ها ادامه یابد:

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

سری نمودار XY

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

سریال مخلوط کردن

می توانید چندین سری را در همان نمودار مخلوط کرده و مطابقت دهید.

بیایید یک خطوط را در بالای ستونهایی که قبلاً داریم اضافه کنیم.

شایان ذکر است که اضافه کردن ستون های متعدد به نمودار ، به طور خودکار آنها را به خوشه های خوب ترتیب می دهد.

نکته این امکان وجود دارد که با استفاده از خواص Zindex خود ، نظمی را که در آن سری ترسیم می شود ، دستکاری کنید. برای اطلاعات بیشتر به بخش "دستکاری سفارش" در مقاله سری مراجعه کنید.

فعال کردن گلوله ها

گلوله های موجود در سری ، به ویژه سری خط ، می تواند خوانایی و جذابیت کلی نمودار را افزایش دهد.

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

پشتهسازی

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

به عنوان مثال چندین سری خط را می توان روی یکدیگر جمع کرد. به همین ترتیب ، سری ستون ها می توانند برای تشکیل "پشته" جمع شوند.

پشته ها را فعال کنید

فعال کردن انباشت برای سری آسان است: فقط ویژگی انباشته شده خود را روی True تنظیم کنید. نمودار از هر چیز دیگری مراقبت خواهد کرد.

در اصل ، stacked = true به معنای این در زبان انسانی است: "سعی کنید سریال های قبلی را به عقب برگردانید".

به طور طبیعی ، این بدان معنی است که این تنظیم هیچ تاثیری در اولین سری تعریف شده ندارد ، زیرا ، خوب ، هیچ سری قبلی برای آن وجود ندارد.

در اینجا یک نمودار ساده با سه سری ستون وجود دارد. همه انباشته = درست است.

100 ٪ پشته

هیچ تنظیم واحدی برای فعال کردن پشته های 100 ٪ در AmCharts 4 وجود ندارد. بیایید آنها را کاوش کنیم.

اول از همه ، ما باید سری خود را به یک قسمت داده اضافی وصل کنیم: "ValueYshow". اساساً ، این قسمت داده به معنای این است: "هنگام نمایش سری ، از این قسمت به جای آن که در" Valuey "مشخص شده باشد ، از این قسمت استفاده کنید.

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

این جایی است که تنظیمات محاسبات محاسبه شده Axis در حال پخش است. تنظیم آن در True (به طور پیش فرض غیرفعال است) به نمودار دستور می دهد تا موارد داده ما را با مقادیر از پیش محاسبه شده جمع کند ، از این نظر مقدار درصد ایالات متحده در مقایسه با سایر موارد داده در همان دسته.

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

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

از آنجا که محور ارزش هوشمند است و سعی خواهیم کرد مقیاس آن را بهینه کنیم ، ممکن است ما با نمودار به پایان برسیم که مقادیری را نشان می دهد که دقیقاً 0 تا 100 نیستند. برای این کار ما باید از Min / Max Axis و همچنین تنظیمات StrictMinmax استفاده کنیم. برای اجرای یک مقیاس 0 تا 100 دقیق:

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

برای این منظور ممکن است از آداپتور استفاده کنیم:

اطلاعات بیشتر اگر با مفهوم آداپتور آشنا نیستید ، مقاله "آداپتورها" ما را بخوانید.

بیایید ببینیم چگونه معلوم شد:

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

لطفاً توجه داشته باشید که این نمودار از انباشت سری با شکاف در داده ها پشتیبانی نمی کند.

این بدان معناست که اگر شما مجموعه داده ها را مستقیماً در سری داشته باشید ، هر سری انباشته باید شامل تعداد مساوی و نقاط داده طبقه بندی/تاریخ باشد ، یا پشته شکسته شود.

مخلوط کردن سریال های انباشته و بدون پشته

ما می توانیم سریال های انباشته و بدون پشته را در همان نمودار مخلوط کنیم.

همانطور که قبلاً توضیح داده شد ، Stacked = True به این معنی است که شما به این سری Piggyback در بالای نسخه قبلی نیاز دارید. بنابراین ، اگر می خواهید برخی از سریال ها در پشته شرکت نکنند ، باید اطمینان حاصل کنید که انباشته شده روی آن درست نشده است ، و این که سریال پس از آن قرار می گیرد ، تنظیم نشده است.

در اینجا نسخه ای از نمودار قبلی وجود دارد ، با یک سری بدون پشته:

پشته های چندگانه

موارد فوق ما را قادر می سازد چندین سری را در پشته های جداگانه جمع کنیم.

هر بار که یک سریال "پشته را می شکند" با تنظیم نکردن انباشته خود در True ، یک پشته جدید آغاز می شود ، با تمام سریال های بعدی که روی سری Breaking قرار دارد.

سری خط با شکاف

ما همچنین می خواهیم از ویژگی های ویژه یک سری خط استفاده کنیم - این توانایی شکستن و شکل گیری "شکاف" است.

شکاف بیش از نقاط داده "خالی"

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

در اینجا نمونه ای از چنین داده هایی آورده شده است:

همانطور که مشاهده می کنید ، داده هایی برای 22 آوریل وجود ندارد (ماه های سازنده تاریخ مبتنی بر صفر هستند).

یک سری ، که از زمینه های ارزش استفاده می کند ، هنوز هم به طور کامل ترسیم می شود ، "پریدن از بالای" 22.

اگر ترجیح می دهیم خط برای شکستن در آنجا باشد ، می توانیم سری Line Series را به False تنظیم کنیم.

در زیر ، نمونه ای را پیدا خواهید کرد که دو سری را نشان می دهد ، هر دو با شکاف در داده های آنها. یکی اتصال = مجموعه کاذب است. دیگری نیست.

مشاهده کنید ، چگونه اولین شکسته می شود ، در حالی که دیگر شکاف ها را به هم می زند:

شکاف بیش از نقاط داده گمشده

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

بیایید داده ها را از مثال قبلی اصلاح کنیم:

اکنون ، 22 آوریل در کل گم شده است.

اگر ما Coect = False را تنظیم کنیم ، خط ما هنوز در آن تاریخ شکسته می شود ، حتی اگر نقطه داده "شکستن" در آنجا وجود نداشته باشد.

این ویژگی (از زمان نسخه 4. 2. 4 موجود است) که مسئول آن است AutogapCount نامیده می شود ، و مانند این کار می کند: اگر فاصله بین دو نقطه داده مجاور بزرگتر از baseinterval * autogapcount باشد و اتصال = نادرست خط شکسته می شود.

پیش فرض این تنظیم 1. 1 است به این معنی که اگر فاصله حداقل 10 ٪ بیشتر از دانه بندی داده ها باشد ، آن را یک شکاف می دانیم.

با نگاهی به داده های نمونه فوق ، ما دانه بندی روزانه داریم: فاصله بین هر نقطه داده یک روز (24 ساعت) است. اکنون ، از 22 آوریل فاصله بین 21 و 23 به دو روز (48 ساعت) می رسد که معیارهای "شکاف" را برآورده می کند (24 ساعت * 1. 1 = 26. 4 ساعت). رونق - شکاف.

این اجازه می دهد تا کنترل ریز و درشت آنچه را که باید شکاف در داده ها را در نظر بگیرید. بگویید ما می خواهیم یک خط فقط در صورتی که فاصله سه روز بین نقاط داده وجود داشته باشد ، شکسته شود: ما AutogapCount = 3 را تنظیم می کنیم. حال اگر فاصله یک یا دو روز بین دو نقطه داده وجود داشته باشد ، آنها حتی اگر Coect = False متصل شوند ، به آنها متصل می شوند.

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

مثال کامل

خوب ، وقت آن است که همه را با هم جمع کنیم: (توجه کنید که چگونه ما داده های خود را به روز کرده ایم تا برای سری دوم که اخیراً اضافه کرده ایم جای بگیریم)

و ببینید چگونه به نظر می رسد:

کنترل های اضافی

افسانه

اکنون که چندین سری داریم ، منطقی است که افسانه ای را برای شناسایی آنها نشان دهیم.

این آسان است ، فقط کلاس Legend Fostiate و به ویژگی افسانه نمودار اختصاص دهید:

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

مکان نما

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

برای افزودن آن ، نمونه ای از xycursor ایجاد کرده و به ویژگی مکان نما نمودار اختصاص دهید:

اطلاعات بیشتر برای کسب اطلاعات بیشتر در مورد نشانگرهای نمودار ، به مقاله اختصاصی "نمودار مکان نما" ما مراجعه کنید.

نوشابه

هرچه نمودار داده های بیشتری داشته باشد ، بیشتر به دست می آید.

در بعضی از مواقع ممکن است بخواهید کاربران را قادر به "بزرگنمایی" در بخش های خاصی از نمودار کنید.

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

یک نمودار می تواند هر دو کتیبه افقی و عمودی داشته باشد.

مانند سایر کنترل های نمودار ، برای اضافه کردن یک نوار پیمایش ، یک کلاس (Scrollbar) را فوری می کنید و به ویژگی نمودار اختصاص می دهید: ScrollBarx را برای پیمایش افقی و پیمایش برای یک عمودی.

نوار پیمایش با پیش نمایش

ما تاکنون عملکرد اصلی پیمایش را به شما نشان داده ایم.

یک مورد خاص از xychartscrollbar وجود دارد. این یک نسخه پیشرفته از نوار پیمایش است ، فقط با XyChart سازگار است ، از این رو نام.

علاوه بر عملکرد معمول Scrollbar ، می تواند پیش نمایش یک یا چند سری نمودار را نیز به نمایش بگذارد. برای استفاده از آن ، به سادگی از کلاس am4charts. xychartscrollbar برای فوری یک نوار پیمایش ، و همچنین فشار () هر یک از سریال هایی که می خواهید به عنوان پیش نمایش روی آن نمایش داده شوید ، استفاده کنید.

آیا می خواهید این یک پیمایش پیشرفته اما بدون سری واقعی داشته باشید؟به سادگی ظرف Scrollbar را که سریال را نگه می دارد پنهان کنید:

سفارشی کردن سوابق

اطمینان حاصل کنید که آموزش "سفارشی سازی نمودار Scrollbar" ما را برای راه هایی برای سفارشی سازی نوار پیمایش بررسی کرده اید.

مضامین

در اوایل این مقاله ، ما رنگ های خاصی را مستقیماً به سری خود تنظیم کردیم.

خیلی راحت نیست ، مگر نه؟رویکرد بسیار بهتر استفاده از مضامین برای اعمال خودکار رنگ ها برای عناصر نمودار است.

AmCharts 4 با مجموعه ای از مضامین متمایز همراه است. شما می توانید از آنها استفاده کنید ، یا خود را بسازید.

شرط بندی از همه ، می توانید چندین موضوع را در همان نمودار اعمال کنید. برای ادویه نمودار خود با انیمیشن ها ، می توانید تم "انیمیشن" را اعمال کنید و از رنگ ها برای پالت مواد استفاده کنید - از موضوع "مواد" همزمان استفاده کنید.

مضامین به طور خودکار بارگیری نمی شوند ، به این معنی که شما باید مانند هر منبع نمودار دیگر آنها را بارگیری کنید.

هنگامی که آنها بارگیری می شوند ، می توانید از تابع am4core.usetheme (موضوع) برای "روشن کردن" موضوع استفاده کنید. هر نمودار پس از آن ، آن موضوع یا چندین موضوع را اعمال می کند.

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

اطلاعات بیشتر برای کسب اطلاعات بیشتر در مورد استفاده از مضامین ، لطفاً به مقاله "مضامین" مراجعه کنید.

نسخه ی نمایشی به روز شده

در اینجا چگونه نمودار ما از قبل به نظر می رسد:

رفتن 3D

عناصر خاصی از Xychart می توانند با طعم سه بعدی وارد شوند.

برای استفاده از آنها ، باید Xychart را به نفع کلاس دیگری رها کنیم: Xychart3d.

پس از انجام این کار ، می توانیم یک سریال ویژه با قابلیت سه بعدی ، مانند Columnseries3D و Coneseries را اضافه کنیم.

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

سناریوهای پیشرفته

چندین محور

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

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

برای چنین سناریوهایی به محورهای متعدد نیاز داریم.

هر سری در Xychart دارای دو ویژگی است: Xaxis و Yaxis.

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

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

تنظیمات محور غیر استاندارد

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

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

یا می توانید فقط دو ValueAxis (عمودی و افقی) داشته باشید تا آن را به طرح پراکندگی تبدیل کنید.

به عنوان نمونه ، اجازه دهید ما نشان دهیم که چگونه می توانید با استفاده از دو دسته بندی - یک عمودی و یک افقی - یک نمودار نقشه گرما ایجاد کنید.

نسخه ی نمایشی فوق ، علاوه بر مظنونین معمولی - سری و محورها - همچنین مفهومی از Heatlegend را معرفی می کند.

اطلاعات بیشتر در مورد Heatlegend در مقاله "افسانه" اطلاعات بیشتری کسب کنید.

خطوط صاف

در AmCharts 4 ، هر سری خط مستقیم یا خمیده (صاف) است. به طور پیش فرض همه خطوط مستقیم هستند - اتصال دو نقطه داده با یک خط مستقیم.

برای صاف کردن خطوط ، ما دو تنظیم سری خط داریم: TensionX و Tensiony.

تنش اندازه گیری می کند که چه مقدار خط به نقطه داده به صورت افقی (TensionX) مورچه به صورت عمودی (تنش) جذب می شود.

مقادیر می توانند به هیچ وجه 0 - بدون تنش و 1 - حداکثر تنش باشند.

تنظیم پیش فرض 1 - حداکثر تنش و در نتیجه خطوط مستقیم است.

توجه داشته باشید اگر تنش پایین تر از پیش فرض 1 باشد ، خط ممکن است و احتمالاً در زیر یا بالاتر از مقادیر واقعی فرو رود یا سنبله کند ، که ممکن است توهم مقادیر تورم را ایجاد کند. با احتیاط استفاده کنید.

الگوریتم هموار سازی جایگزین

تاکنون ما به الگریم پیش فرض هموار سازی نگاه کرده ایم ، که می تواند با تنظیمات TensionX و تنش اصلاح شود.

Lineseries از دو الگوریتم جایگزین اضافی پشتیبانی می کند ، از طریق تنظیم هموار سازی سری: "Monotonex" و "یکنواخت" فعال می شود.

این دو تنظیم از هیچ ویژگی اضافی پشتیبانی نمی کنند - TensionX و Tensiony در صورت تنظیم نادیده گرفته می شود.

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