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

- visibility ۰ mode_comment

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

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

نیاز به لاگین

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