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

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



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

sparkline : پلاگین jQuery برای قرار دادن نمودار inline

0 1231 ۲۵ اسفند ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام sparkline رو خدمت شما معرفی کنم و اونو آموزش بدم.

sparkline

 

با استفاده از این پلاگین میتونین نمودارهای زیبا و پیشرفته ای رو بصورت inline درون نوشته ها و متون خودتون قرار بدین و اطلاعاتتون رو بصورت بصری به کاربرانتون نمایش بدین. پشتیبانی این ابزار از مرورگرها بسیار عالی هست ، بطوری که بر روی IE6 به بالا بخوبی پشتیبانی میشه.

انواع نمودارها :

  • line
  • bar
  • tristate
  • discrete
  • pie
  • bullet

 

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

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

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

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

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

برای قرار دادن هر نمودار یک span باید بزارید. من در بالا تعدادی قرار دادم و به هر کدام هم کلاسی ، هم نام با انواع نمودارها نسبت دادم. بصورت زیر :

برای قرار دادن مقادیر نمودار دو روش وجود داره :

  1. با استفاده از HTML :
    برای اینکار باید مقادیر رو درون خاصیت values بترتیب قرار بدین و با کاما از هم جدا کنید ، بصورت زیر :
  2. با استفاده از Javascript :
    در این روش باید در Javascript یک متغیر تعریف کنید و مقادیر رو به اون نسبت بدین ، بصورت زیر :

حالا باید بیاید و با استفاده از Javascript نمودار رو راه بندازین ، بصورت زیر :

میبینید که در ابتدا span مورد نظر رو انتخاب کردیم و بعد از اون متد sparkline رو براش فراخوانی کردیم. مرحله بعدی اینه که بیایم و مقادیر رو بهش بدیم. دو روش وجود داره :

  1. اگر مقادیر رو درون values بصورت HTML قرار دادین ، باید به این صورت کد رو بنویسید :
  2. اگر بصورت متغیر در Javascript تعریف کردین ، بصورن زیر :

    myvalues همون متغیری هست که در بالاتر تعریف کردیم.

تا اینجا نمودار رسم شده. با این وجود که تنظیمات پیش فرض به اون اعمال میشه. هر نوع از نمودارها تنظیمات زیادی دارن که در اینجا وقت نمیشه که اونا رو توضیح داد. در سایت اصلی همه اونا رو با مثال توضیح داده.

برای قرار دادن نوع نمودار و عرض و ارتفاع آن باید در ابتدا یک {} به انتهای کد قبلی اضافه کنید ، بصورت زیر :

حالا باید درون {} تنظیمات مورد نظر خودتون رو وارد کنید. بصورت زیر :

در کد بالا فقط سه ویژگی رو قرار دادم ، ولی خیلی بیشتر هستن.

  • type : با استفاده از این ویژگی میتونین نوع نمودار رو مشخص کنید. مقدار این ویژگی رو یکی از همون ویژگی هایی که در بالا قرار دادم رو ، میتونین قرار بدین.
  • width : با استفاده از این ویژگی میتونین عرض نمودار رو تغییر بدین
  • height : با استفاده از این ویژگی میتونین ارتفاع نمودار رو تغییر بدین

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram