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

- visibility ٠ mode_comment

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

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

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

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

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

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

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

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

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

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

یا علی

Source

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

نیاز به لاگین

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