نمودار خط واکنش

IGNITE UI برای نمودار خط React یا نمودار خط نوعی از نمودارهای دسته بندی است که مقادیر داده مداوم را نشان می دهد که توسط نقاط متصل به بخش های مستقیم خط یک یا چند مقدار در طی یک دوره زمانی نشان داده شده است. این اغلب برای نشان دادن روندها و انجام تجزیه و تحلیل مقایسه ای استفاده می شود. محور y (برچسب ها در سمت چپ) مقدار عددی را نشان می دهد ، در حالی که محور x (برچسب های پایین) یک دسته زمانی یا مقایسه را نشان می دهد. برای مقایسه می توانید یک یا چند مجموعه داده را درج کنید که به عنوان چندین خط در نمودار ارائه می شود.

نمونه نمودار خط واکنش

شما می توانید با اتصال داده های خود به ویژگی های OptemsSource و تنظیم ویژگی ChartType به خط ، همانطور که در مثال زیر نشان داده شده است ، نمودار خط React Line را در کنترل igrategatorchart ایجاد کنید ، همانطور که در مثال زیر نشان داده شده است.

توصیه های نمودار خط

آیا نمودارهای خط React برای پروژه شما مناسب هستند؟

• متفاوت از نمودار منطقه ، نمودار خط ناحیه بین محور x (محور پایین) و خط را پر نمی کند.
• نمودار خط React با نمودار Spline React در همه جنبه ها یکسان است به جز اینکه خط اتصال خط اتصال دارای درون یابی Spline و هموار سازی برای بهبود داده ها نیست.

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

• نمودار خط لایه
• نمودار خط انباشته
• نمودار خط پله
• نمودار خط قطبی
• نمودار 100 خط جمع شده

موارد استفاده از نمودار خط

چندین مورد استفاده مشترک برای انتخاب نمودار خط وجود دارد:

• یک مجموعه داده با حجم بالا و با حجم بالا داشته باشید که به خوبی با تعامل نمودار مانند Panning ، Zooming و Drill-Down مطابقت داشته باشد.
• نیاز به مقایسه روند به مرور زمان دارد.
• می خواهید تفاوت بین 2 یا بیشتر سری داده ها را نشان دهید.
• می خواهید مقایسه های بخشی به کل تجمعی از دسته های مجزا را نشان دهید.
• برای تجزیه و تحلیل مقایسه ای نیاز به نشان دادن روند داده برای یک یا چند دسته دارد.
• نیاز به تجسم داده های سری زمانی دقیق.

نمودار خط بهترین شیوه ها:

• همیشه محور y (محور چپ یا راست) را در 0 شروع کنید تا مقایسه داده ها دقیق باشد.
• داده های سری زمانی را از چپ به راست سفارش دهید.
• برای نشان دادن مجموعه ای از داده ها از ویژگی های بصری مانند خطوط جامد استفاده کنید.

در صورت عدم استفاده از نمودار خط

• شما تعداد زیادی از داده های (بیش از 7 یا 10) داده دارید. هدف شما اطمینان از خواندن نمودار است.
• داده های سری زمانی دارای مقادیر مشابهی هستند (داده ها در مدت مشابه) ، باعث می شود که خطوط همپوشانی تمایز غیرممکن باشد.

ساختار داده نمودار خط:

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

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

نمودار خط React اغلب برای نشان دادن تغییر ارزش در طول زمان مانند میزان برق تجدید پذیر تولید شده از سال 2009 در طی یک دوره ده ساله استفاده می شود ، همانطور که در مثال زیر نشان داده ایم.

شما می توانید با اتصال داده های خود و تنظیم ویژگی ChartType به خط ، این نوع نمودار را در کنترل igrategatorchart ایجاد کنید ، همانطور که در مثال زیر نشان داده شده است:

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

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

شما می توانید با اتصال داده های خود و تنظیم ویژگی ChartType به خط ، این نوع نمودار را در کنترل igrategatorchart ایجاد کنید ، همانطور که در مثال زیر نشان داده شده است:

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

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

در این مثال ، ما در فاصله ای از انتخاب شما ، داده های زنده را در نمودار خط React پخش می کنیم. می توانید نقاط داده را از 5،000 به 1 میلیون تنظیم کرده و نمودار را به روز کنید تا مقیاس را بر اساس دستگاهی که در حال ارائه نمودار هستید بهینه کنید.

شما می توانید با اتصال داده های خود و تنظیم ویژگی ChartType به خط ، این نوع نمودار را در کنترل igrategatorchart ایجاد کنید ، همانطور که در مثال زیر نشان داده شده است:

نمودار خط یک ظاهر طراحی واکنش نشان می دهد

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

شما می توانید با اتصال داده های خود و تنظیم ویژگی ChartType به خط ، این نوع نمودار را در کنترل igrategatorchart ایجاد کنید ، همانطور که در مثال زیر نشان داده شده است:

انواع پیشرفته نمودارهای خط

بخش های زیر انواع پیشرفته تر نمودارهای خط React را توضیح می دهند که می توانند با استفاده از کنترل Igrdatachart به جای کنترل Igrategatorchart با API ساده ایجاد شوند.

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

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

React نمودار 100 ٪ خط را جمع کرد

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

شما می توانید با اتصال داده های خود به یک igrstacked100lineseries ، همانطور که در مثال زیر نشان داده شده است ، این نوع نمودار را در کنترل igrdatachart ایجاد کنید:

نمودار خط شعاعی واکنش نشان می دهد

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

شما می توانید با اتصال داده های خود به یک igradiallineseries ، همانطور که در مثال زیر نشان داده شده است ، این نوع نمودار را در کنترل igrdatachart ایجاد کنید:

نمودار خط قطبی واکنش نشان می دهد

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

شما می توانید با اتصال داده های خود به یک igrpolarlineseries ، همانطور که در مثال زیر نشان داده شده است ، این نوع نمودار را در کنترل igrdatachart ایجاد کنید:

منابع اضافی

در این مباحث می توانید اطلاعات بیشتری در مورد انواع نمودار مرتبط پیدا کنید:

منابع API

در جدول زیر اعضای API ذکر شده در بخش های فوق لیست شده است: