آموزش رسم نمودار با Highcharts (جلسه 29) - نمودار داینامیک و پویا - قسمت 1

- visibility ٠ mode_comment

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. highcharts

نمونه اول : نمودار خطی spline با Update شدن در هر ثانیه

در این نمونه میخایم نمودار خطی با خطوط انحناداری رو رسم کنیم که در هر ثانیه آپدیت و به روزرسانی میشه و بصورت داینامیک یا پویا عدد جدید اون بر روی نمودار نمایش داده میشه. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

میبینید که در ابتدا کدی بصورت زیر رو قرار دادیم:

میبینید که در ابتدا نوع نمودار رو برابر با spline یا smooth line قرار دادیم و با اینکار خطوطی که نقاط رو به هم وصل میکنن، خط راست نیستن و انحنا دارن. با استفاده از ویژگی animation هم مشخص کردیم که زمانی که تغییری در نمودار ایجاد شد، با حالت انیمیشنی نمایش داده بشه. این انیمیشنها در مرورگرهای IE9 و قدیمی تر نمایش داده نمیشن. با استفاده از ویژگی marginRight هم فاصله از سمت راست رو برابر با 10 پیکسل قرار دادیم. درون ویژگی events محاسبات مورد نظر خودمون رو قرار میدیم و مشخص میکنیم که چند وقت یکبار آپدیت بشه و اینکه چه مقادیری برای عضو جدید باید در نظر گرفته بشه.  میبینید که در بالا یک setInterval قرار داده شده و هر 1000 میلی ثانیه یکبار اجرا میشه و یک عضو به series اضافه میکنه. هر عضوی که اضافه میشه آرایه ای از x و y هست. x رو همون زمان فعلی در نظر میگیریم و y هم با استفاده از متذ random یک مقدار تصادفی در نظر میگیریم.

متغیر series هم بصورت زیر هست:

میبینید که نام دسته رو برابر با Random data قرار دادیم و برای داده ها هم بصورت تصادفی اعدادی رو مشخص کردیم و در نمودار قرار دادیم. در آخر هم میبینید که چنین کدی قرار داده شده:

میبینید که ویژگی useUTC رو برابر با false قرار دادیم تا با این کار ساعت محلی خودمون نمایش داده بشه. اگه برابر با true باشه ساعت جهانی که چند ساعت با کشورمون اختلاف داره نمایش داده میشه. خروجی بصورت زیر خواهد بود:dynamic spline chart

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.