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

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



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

رسم انواع نمودارها با کتابخانه chart.js (قسمت اول)

5 6369 ۲۹ خرداد ۹۳

با سلام خدمت شما کاربران عزیز سون لرن، امروز با آموزش کامل فریم ورک chart.js اومدیم.

حتما شده که بخواهید تو سایتتون از نمودار ها و چارت های زیبا و متحرک استفاده کنید و به همین دلیل مجبور به نصب افزونه های حجیم و زیادی شده باشید،اما امروز می خواهیم که شما را با یک فریم ورک تخصصی جاوا اسکریپت آشنا کنیم که بتونید با اون پویایی رو به سایتتون ببخشید.

خب برای شروع بد نیست یکم با این فریم ورک آشنا بشید.وبسایت رسمی این فریم ورک پرکاربرد chartjs.com می باشد و شما می توانید این فریم ورک را از همین سایت دانلود کنید. البته برای اون دسته از عزیزان هم که استفاده از cdn را می پسندند آدرس مقابل پیشنهاد می شه : cdn for chart.js

برای فراخوانی این فریم ورک در html یا php از کد زیر در تگ head استفاده کنید :

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

خب حالا پس از فراخوانی باید نوع نموداری که مد نظر ماست رو انتخاب کنیم:

نمودار خطی

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

 

نکته : در نظر داشته باشید طول و عرض را براحتی می توانید تغییر دهید.

حال باید مقادیر مد نظر و رنگ و اسامی آنها را برگزینیم.که باید کد زیر را بین دو تگ head قرار دهید :

توجه کنید که در خط سوم می توانید گزینه هایی که می خواهیم درصد وجود آنها را نشان دهیم قرار دهیم. اگر هم بخواهیم گزینه ای را اضافه کنیم باید بین  " " و پس از , درون کروشه قرار دهیم.

در خط 6 تا 9 هم ویژگی های ظاهری را باید رعایت کنیم و در خط 10 که مهم ترین خط است باید مقادیر هر یک از پارامتر هایی که در خط 3 وارد کردیم را به ترتیب اضافه کنیم.

نمودار دایره ای

برای درج این نوع نمودار باید کد html زیر را در هر جایی از سایت که می خواهید نمودار آنجا باشد قرار دهید (بین دو تگ body) :

سپس کد زیر را هم بین دو تگ head قرار دهید :

 

نکته : در نظر داشته باشید که محتوای هر آکولاد از یک value که نشان دهنده ی درصد و یک color که نشان دهنده ی رنگ هر پارمتر است تشکیل شده است.اگر هم تمایل به حذف پارامتر ها و یا اضافه کردن دارید باید یک آکولاد دیگه حذف یا اضافه کنید.

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

امیدوارم که این قسمت مورد توجه شما قرار گرفته باشه.

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

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

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

  • ‏‏
    حامد مودی(۱ تیر ۱۳۹۳)

    سلام
    خوبه شروع کردی این بحثو. بحث جالبیه ولی گسترده س.
    سوالم اینه که تا کجاهاش میخوای پیش بری؟
    ممنون

  • ‏‏
    افشین زندی(۲۲ دی ۱۳۹۳)

    سلام
    ممنون از اموزش خوبتون
    اما اگه امکانش هست به صورت فایل ویدیویی تهیه کنید خیلی عالی میشه
    بازم ممنون

  • ‏‏

    وای عالیه جای همچین چیزی خیلی خالی بود اگر بیشتر توضیح بدین یا یک سری آموزشی کوچیک براش درست کنین عالی میشه

  • ‏‏

    سلام عالی بود واقعا ممنون سری دوم رسم نمودار ازچه زمانی قرار داده میشه؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram