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

- visibility ۵ mode_comment

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

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

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

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

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

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

نمودار خطی

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

 

info نکته :

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

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

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

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

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

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

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

 

info نکته :

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

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

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

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

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

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

افشین زندی

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

Amir Saleh

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

گلناز

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

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

قسمت دوم این سری:
http://www.7learn.com/tutorials/chart-js-part2

نیاز به لاگین

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