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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته jQuery (قسمت آخر)

2 472 ۲۲ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 97 : نمودارهای داینامیک و پویا

کتابخانه xcharts یک ابزار قدرتمند ، انیمیشنی و داینامیک هست که قابلیت اینو داره که بصورت Ajax اطلاعات نمودار رو بروز رسانی کنه. برای استفاده از این ابزار میتونین فایلهای مورد نظر رو include کنید.

در ابتدا باید فایل CSS رو قرار بدین:

بعد از اون فایلهای Javasccript رو include میکنیم:

بعد از اون باید المنتی که قصد داریم نمودار درون اون نمایش داده بشه رو قرار بدیم.

حتما برای این المنت خصوصیتهای width و height رو قرار بدین و مشخص کنید.

حالا میتونیم تنظیمات مورد نظرمون رو برای ساخت نمودار قرار بدیم.

اول میام یک آرایه بنام set تعریف میکنیم و درون اون مقادیر تصادفی قرار میدیم که بتونیم نمودارهای تصادفی بسازیم.

همونطور که دیدید یک حلقه For قرار دادیم که 5 بار تکرار بشه. در هر بار تکرار حلقه هم دو عدد تصادفی برای x و y مشخص میکنه که x مقدار افقی و y  مقدار عمودی اون عضو رو مشخص میکنه.

حالا میایم و تنظیمات نمودار مورد نظرمون رو قرار میدیم:

میبینید که یک متغیر بنام به data ساختیم و اطلاعات رو درون اون قرار دادیم.

  • xScale : نوع مقیاس بندی بر روی محور افقی رو مشخص میکنه
  • yScale : نوع مقیاس بندی بر روی محور عمودی رو مشخص میکنه
  • type : نوع نمودار رو مشخص میکنه
  • className : با استفاده از این ویژگی میتونین به نمودار یک کلاس رو بدین که بشه به اون دسترسی داشته باشید
  • data : در اینجا هم مقادیر رو قرار میدیم که قبلا مقادیر رو در متغیر set قرار دادیم

حالا میتونیم متدها و اعمال مورد نظرمون رو بر روی نمودار مشخص کنیم و درون متغیر opts قرار بدیم:

با استفاده از متد tickFormatX میتونید قالب بندی لیبلهای محور افقی رو تغییر بدین.

حالا باید با استفاده از عملگر new یک نمونه جدید از شئ xChart بسازید و مقادیری که در بالا تعریف کردیم رو درونش بزاریم:

با اینکار نمودار رسم میشه و میتونین خروجی رو ببینید. در این مثال اطلاعات بصورت تصادفی بوجود میان ولی شما میتونین اطلاعات رو بوسیله Ajax دریافت کنید و اطلاعات رو داینامیک تغییر بدین. در این مطلب آموزش داده شده که چطور اطلاعات رو با Ajax دریافت کنید و در نمودار قرار بدین.

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

خروجی رو میتونین در تصویر زیر ببینید:

xchart

در این سری آموزش قرار بود که 100 نکته بیان بشه ولی با بررسی بیشتر متوجه شدم که 3 مورد از اونا بدرد کاربران فارسی زبان نمیخوره و اونا رو بیان نکردم.

در این سری 97 ترفند و نکته و ... بیان شد که امیدوارم با خواندن اونا تونسته باشین با jQuery بیشتر آشنا شده باشین.

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

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

یا علی

Source

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

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

  • ‏‏
    حمید رضا مصطفی زاده(۲۳ آذر ۱۳۹۴)

    سلام و دست مریزاد مهندس بابت این نکات jquey
    منتظر pdf مطالب هستیم.
    آقای اسفندیاری بیشتر مطالبت شما UI بود
    شما که دارید زحمت میکشید به نظرتون وقتش نیست که برید سمت server؟
    واقعا جای مطالب mvc تو سایت شما خالی هست….
    تشکر

    • ‏‏
      محمد اسفندیاری(۲۴ آذر ۱۳۹۴)

      سلام خواهش میکنم
      PDF هم به زودی قرار داده میشه
      در مورد MVC هم شاید مطالبی قرار داده بشه.
      فعلا یکم سرم شلوغه و بنظرم اگه اول UI قوی باشید بعد برید سمت سرور خیلی بهتره
      موفق باشید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram