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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش رسم نمودار با Highcharts (جلسه 14) - نمودارهای سطحی - قسمت 5

0 183 ۴ خرداد ۹۵

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

نمونه نهم و آخر : نمودار سطحی ترکیبی از بازه و خطی

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

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

میبینید که در ابتدا نوع داده های محور افقی رو از نوع datetime قرار دادیم و حالا به عنوان مقدار باید timestamp بصورت میلی ثانیه وارد کنید و این ابزار خودش اون رو بصورت تاریخ میلادی در میاره و در نمودار نمایش داده میشه. برای محور عمودی هم title نزاشتیم. برای بازه مورد نظر اعداد زیر رو در نظر گرفتیم:

برای همین timestamp ها و در هر نقطه میانگین رو هم حساب میکنیم و قرار میدیم:

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

میبینید که shared و crosshairs رو برابر با true قرار دادیم و valueSuffix هم برابر با درجه سانتیگراد قرار دادیم تا به همه اعداد در tooltip یک پسوند درجه سانتی گراد اضافه کنه. حالا میرسیم به قسمت مهم این مطلب و اون هم متغیر series هست:

میبینید که دو سری تعریف کردیم. اولین مورد رو بنام Temprature قرار دادیم و اطلاعات اون رو هم همون آرایه average قرار دادیم و zIndex اون رو هم برابر با 1 قرار دادیم و کاری کردیم که روی اون بازه دیگه قرار بگیره و بالاتر باشه. با استفاده از marker هم رنگ و ضخامت خط و .... رو مشخص کردیم.

برای سری دوم هم نام Range رو قرار دادیم و اطلاعات اون رو هم همون آرایه ranges قرار دادیم و نوع اون رو arearange قرار دادیم تا بصورت بازه ای نمایش داده بشه. با استفاده از ویژگی linkedTo اون رو به سری قبلی ربط دادیم و متصل کردیم. zIndex رو هم برابر با 0 قرار دادیم تا زیر اون نمودار خطی قرار بگیره.

خروجی کار بصورت زیر خواهد بود:Area line range

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram