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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 214 ۲۸ خرداد ۹۵

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

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

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

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

نوع نمودار برابر با gauge قرار گرفته و با این کار نمودارمون بصورت عقربه دار میشه و یک چیزی رو اندازه گیری میکنه و عددی رو نمایش میده و میشه از اون مثلا برای ساخت کیلومتر شمار استفاده کرد.

با استفاده از کد بالا پس زمینه کیلومتر شمار رو استایل دهی کردیم و درون اون از گرادیانهای خطی استفاده کردیم. میبینید که با استفاده از ویژگی های startAngle و endAngle هم شروع و پایان کیلومتر شمار رو مشخص کردیم که محدوده چرخش 300 درجه هست.

با استفاده از این کد محور مدرج خودمون یا همون جایی که اعداد و نشانه ها بر روی اون قرار میگیره رو استایل دهی میکنیم. میبینید که کمترین و بیشترین مقدار برای اون بترتیب برابر با 0 و 200 هست. تعداد جابجا شدن در عقربه و تیک ها رو مشخص کرده. عقربه یکی یکی جابجا میشه و اون تیکهایی که بر روی محور قرار داده شده اند، دوتا دوتا اضافه میشن. رنگ و ضخامت اونا هم مشخص شده. عنوان رو هم درون title قرار دادیم. با استفاده از ویژگی plotBands مشخص کردیم که هر بازه ای بر روی نمودار چه رنگی داشته باشه. میبینید که از 0 تا 120، سبز رنگ، از 120 تا 160 زرد رنگ و از 160 تا 200 قرمز رنگ هست. برای اینکه یکم جان به این کیلومتر شمار ببخشیم و اونو زنده جلوه بدیم، قطعه کد زیر رو هم اضافه میکنیم:

این تابع باعث میشه که هر 3000 میلی ثانیه یکبار، یک داده جدید بر روی کیلومتر شمار نمایش داده بشه و عقربه جابجا بشه و یکم طبیعی تر بنظر برسه. خروجی بصورت زیر هست:guage angular highcharts

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram