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

- visibility ۲ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته 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

comment دیدگاه کاربران
حمید رضا مصطفی زاده

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

محمد اسفندیاری

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

نیاز به لاگین

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