illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 299 ۲۰ خرداد ۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram