طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

رسم چارت مقایسه ای و نمودار آماری با Jquery


رسم چارت مقایسه ای و نمودار آماری با Jquery

Highcharts یکی از پلاگین های جی کوئری است که چارت های مختلف و زیبایی را ارایه می دهد و برای رسم چارت مقایسه ای و نمودار آماری با Jquery استفاده می شود. چارت مقایسه ای برای ارایه تجسمی گرافیکی از داده های آماری استفاده می شود . مثلا بلفرض میزان بازدید سایت ، تعداد فروش محصولات در بازه زمانی و سود حاصله و غیره از مواردی است که می توانید به صورت گرافیکی رسم و در یک نگاه اطلاعات آن را بفهمید. نمودار های مختلفی مثل نمودار پایه ای ، میله ای ، ستونی وجود دارد . این اسکریپت به صورت سمت-کاربر براساس جاواسکریپت است که براحتی می شود در پروژه های تحت وب پیاده سازی کرد.

رسم چارت مقایسه ای و نمودار آماری با Jquery

در این آموزش سعی داریم مثالی از خلاصه و رسم چارت مقایسه ای و نمودار آماری با Jquery و  Highcharts را بررسی کنیم. در این مثال سرشماری سه کشور پرجمعیت دنیا را در سه سال اخیر را مقایسه کنیم. این مقایسه را به صورت نمودار ستونی نشان خواهیم داد.

 

اول باید طول محور xوy و دیگر آپشن ها را تنظیم کنیم .بعد از ست کردن آپشن های ضروری ، یک آرایه ای از کشور ها ایجاد می کنیم. بعد از آن داده های سرشماری را به پلاگین پاس می دهیم تا چارت ما رسم شود.

 

کد HTML برای نمایش نمودار گرافیکی

کد html زیر چک باکس انتخاب کشور ها را برای مقایسه سرشماری در اختیار کاربر می گذارد . بعد از کلیلک بر روی دکمه compare برای مقایسه اطلاعات سرشماری به صورت نمودار گرافیکی در تگ div با ID، chart نمایش داده می شود.ID  این تگ را در آپشن renderTo  ست خواهیم کرد.

ساخت نمودار ستونی توسط Higcharts

کد زیر برای ست کردن تعدادی آپشن برای رسم نمودار استفاده می شود. که شامل نوع نموادر (میله ای ، ستونی ….) ، عنوان ، طول و عرض ، محور x,y و غیره است.

حتما بخوانید  تغییر پس زمینه با اسکرول در jQuery

پس از ست کردن تنظیمات ، باید داده های آن ها را قرار بدیم . در کد زیر ، ما کشور ها و سرشماری آن ها را به علاوی تعدادی از آپشن ها مثل رنگ را تنظیم می کنیم.

 

حتما بخوانید  بارگذاری محتوای داینامیک با jQuery

خروجی اسکریپت رسم چارت مقایسه ای و نمودار آماری با Jquery به اینصورت خواهد بود :

 

رسم چارت مقایسه ای و نمودار آماری با Jquery

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

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

 

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه