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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

8 1643 ۱۲ اردیبهشت ۹۴

در این مطلب میخوام یک ابزار زیبا بنام circles رو خدمت شما معرفی کنم و اونو آموزش بدم.

circles

 

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

میبینید که سه دایره قرار داده شده و درون اونا اعدادی وجود داره و اون دایره متناسب با مقدارش پر شده است.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به circles.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

اولین کاری که باید بکنید ، اینه که div که قراره در بردارنده این نمودار باشه رو مشخص کنید. دقت کنید که هر div فقط میتونه یک نمودار رو در خود قرار بده. اگر مثلا 3 تا نمودار خواستید ، باید 3 div با id های متفاوت قرار بدین.

کلاس circle رو به این علت قرار دادم که خواستم یک استایل css به همه اونا نسبت بدم ، بصورت زیر :

میبینید کاری کردم که در کنار هم قرار بگیرن و همچنین فاصلشون رو از هم زیاد کردم. برای ساختن هر نمودار باید یکبار از دستور Circle.create استفاده کنید. بصورت زیر :

میبینید که برای هر div یک کد جدا نوشتیم. متد create تعدادی ویژگی داره که خدمتتون عرض میکنم :

  • id : id المنت مربوط به اون رو مشخص میکنید
  • radius : شعاع دایره نمودار رو مشخص میکنید
  • value : مقدار فعلی نمودار رو مشخص میکنه
  • maxValue : بیشترین مقدار ممکن برای نمودار رو مشخص میکنه. با توجه به این مقدار و Value دایره مورد نظر پر میشه
  • width : ضخامت نمودار با استفاده از این ویژگی مشخص میشه
  • colors : مقدار آن بصورت یک آرایه ی دو عضوی هست ، رنگ اول رنگ کل دایره رو مشخص میکنه و رنگ دوم رنگ اون مقداری که پر شده است رو مشخص میکنه
  • duration : با استفاده از این ویژگی هم میتونین مدت زمانی که باید طول بکشه تا بصورت انیمیشنی از صفر به ماکزیمم مقدارش برسه رو مشخص کنید

اگر برای مقدار از اعداد اعشاری استفاده کنید ، میبینید که قسمت اعشارش هم مثل قسمت غیر اعشار هست. برای اینکه ظاهرش رو بهتر کنید ، میتونین قسمت اعشاری رو با استفاده از CSS تغییر بدین. بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

موفق باشید. یا علی

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

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    افشین زندی(۱۳ اردیبهشت ۱۳۹۴)

    ممنون آقای اسفندیار بابت معرفی این پلاگین.
    خیلی مفید بود.
    لطفا اگه میشه پلاگین هایی رو هم برای ساخت portfolio های زیبا معرفی و آموزش بدید.ممنون

  • ‏‏

    سلام
    ممنون بابت این پست.
    ببخشید من زیاد به کد نویسی وارد نیستم.
    چطور میتونم از این موردی که شما معرفی کردید تو سایتم به عنوان نمودار پیشرفت پروژه استفاده کنم؟
    اینم سایتمه: http://www.arize.ir
    ممنون میشم راهنماییم کنید.

    • ‏‏
      محمد اسفندیاری(۱۴ اردیبهشت ۱۳۹۴)

      سلام
      باید در محل دلخواهتون بتعداد هر پروژه یک div قرار بدین ، مثلا اگر 3 تا پروژه داشته باشید ، باید 3 تا div بزاری. ، بصورت زیر :


      بعد از اون استایل CSS مورد نظرتون رو روی اونا در نظر بگیرید تا جایگاهشون در صفحه مشخص بشه.
      بعد از اون هم باید کدهای Javascript بالا رو وارد سایتتون کنید ، با این تفاوت که بجای Value هر کدام ، مقدار پیشرفت پروژه رو قرار بدین
      موفق باشید

  • ‏‏

    سلام اقا محمد
    منم یه نمودار دارم ولی فقط یه دونه نمودار رو نشون میده،هر چی میکنم 2تا نمودار رو نشون نمی ده
    می تونین راهنمایی کنین؟

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram