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

- visibility ٠ mode_comment

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

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

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

سلام
با تشکر از شما
خوشحالیم که تونستیم برای شما کاری رو انجام بدیم
موفق و پیروز باشید

نیاز به لاگین

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