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

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش رسم نمودار با Highcharts (جلسه 39) - نمودار زاویه ای - قسمت 3

0 263 ۳۰ خرداد ۹۵

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

نمونه سوم : ساخت ساعت با استفاده از نمودار زاویه ای

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

همونطور که میبینید در این نمونه علاوه بر فایل اصلی highcharts، فایل hightchart-more رو هم وارد کردیم که قابلیتهای بیشتری رو به قابلیتهای قبلی اضافه میکنه.

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

این مورد یک تابع هست که در هر بار اجرا و فراخوانی، تاریخ فعلی و کنونی رو دریافت میکنه و ساعت، دقیقه و ثانیه اون رو بصورت مرتب و یک object بر میگردونه.

میبینید که نوع نمودار رو برابر با gauge یا زاویه ای قرار دادیم و سایه، حاضیه و رنگ رو برای اون قرار ندادیم و ارتفاع نمودار یا ساعت رو برابر با 200 در نظر گرفتیم.

بعد از اون با استفاده از متغیر pane پس زمینه ساعت و رنگ اون رو مشخص کردیم. همونطور که میبینید background اون رو بصورت پیش فرض قرار دادیم و همچنین برای اون یک Gradient قرار دادیم که شعاع اون 1.9 هست و موقعیت مرکز دایره هم با استفاده از cx و cy مشخص شده. رنگهایی هم که گرادیان به اونا ختم میشه در ویژگی stops قرار داده شده. با استفاده از این گرادیان یک حالت reflex یا بازتاب زیبا روی ساعت میوفته و مرورگرهایی که گرادیان رو پشتیبانی میکنن اون رو نمایش میدن.

با استفاده از متغیر yAxis هم محور ساعت رو مشخص کردیم و عددها بر روی این محور نمایش داده میشن. حداقل و حداکثر مقدار رو برابر با همون 0 و 12 قرار دادیم که نمایانگر ساعت هست. با استفاده از ویژگی های دیگه هم ضخامت و رنگ عقربه و تیک ها رو مشخص میکنیم و در آخر هم با استفاده از ویژگی title، عنوان ساعت و استایل مورد نظر رو برای اون قرار دادیم.

با استفاده از متغیر series داده هامون که همون اعداد ساعت و دقیقه و ثانیه هستن رو قرار دادیم و به نمودار معرفی کردیم. میبینید که سه دسته hour و minute و second اضافه شده و درون هر کدوم از اونا یک ویژگی dial قرار داده شده که با استفاده از اون شعاع و طول و ضخامت داده ها رو مشخص میکنه.

در آخر هم یک setInterval قرار دادیم و هر 1 ثانیه یکبار اجرا میشه و تعدادی کار رو انجام میده و ساعتمون رو ره میندازه تا طبیعی به نظر برسه. در هر بار اجرا موقعیت قرار گیری عقربه های ساعت، دقیقه و ثانیه شمار بروزرسانی میشه. خروجی بصورت زیر هست:guage clock chart

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram