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

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



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

آموزش رسم نمودار با Highcharts (جلسه 6) - نمودارهای خطی - قسمت 2

0 273 ۲۵ اردیبهشت ۹۵

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

نمونه سوم : نمودار با قابلیت زوم و بزرگنمایی و سری زمانی

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

همونطور که دیدید در ابتدا فایلهای مورد نظر که jQuery و Highcharts هستند رو لود کردیم. بعد از اون یک container قرار دادیم که نمودار مورد نظرمون رو در اون جاسازی کنیم.

میبینید که در خط 13 کد زیر وجود داره:

با استفاده از ویژگی zoomType که یکی از ویژگی های chart هست، میتونین نوع بزرگنمایی که قرار هست انجام بشه رو مشخص کنید. این ویژگی سه مقدار رو قبول میکنه:

  • x : باعث میشه که محدوده ای رو در امتداد محور x انتخاب کنیم و بزرگنمایی بر روی اون صورت بگیره
  • y : باعث میشه که محدوده ای رو در امتداد محور y انتخاب کنیم و بزرگنمایی بر روی اون صورت بگیره
  • xy : باعث میشه که محدوده ای رو هم در امتداد x و هم در امتداد y انتخاب کنیم و بزرگنمایی بر روی اون صورت بگیره

اگر بخوام قابلیت بزرگنمایی رو در خروجی بهتون نشون بدم، بصورت زیر خواهد بود:zoom

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

میبینید که در series داده ها رو قرار داده و با استفاده از اونا نمودار رسم میشه. میبینید که در ابتدا نوع اون رو area قرار دادیم و به این معنی هست که سطح زیر نمودار نمایش خواهد شد و بصورت سطحی پدیدار میشه. نام اون رو مشخص کردیم و نقاط رو هم در ویژگی Data قرار دادیم.

برای subtitle کد زیر قرار داده شده:

این کد باعث میشه که در دستگاه هایی که از touch پشتیبانی میکنن مثل گوشی، متن متفاوتی از Desktop نمایش داده بشه. برای plotOption هم مقادیر زیر رو قرار میدیم:

میبینید که در ابتدا درون ویژگی area و با استفاده از ویژگی fillColor رنگ سطح زیر نمودار رو بصورت گرادیانی قرار دادیم و با استفاده از stops رنگهای اون رو مشخص کردیم. زمانی که بر روی نمودار هاور میکنیم، در اون نقطه یک نقطه دایره ای نمایش داده میشه که با استفاده از ویژگی radius، شعاع اون رو برابر با 2 پیکسل قرار دادیم. ضخامت نمودار رو 1 پیکسل در نظر گرفتیم و گفتیم که در states یا حالت hover هم ضخامت نمودار 1 پیکسل باشه. خروجی مثل همون تصویری که در بالا قرار دادیم بصورت زیر خواهد بود:zoom

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

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram