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

- visibility ۰ mode_comment

در این مطلب میخوام یک پلاگین 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 : با استفاده از این ویژگی میتونین ارتفاع نمودار رو تغییر بدین

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

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

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

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

نیاز به لاگین

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