آموزش Chart js فریم ورک ترسیم نمودار با جاوا اسکریپت

 

آموزش Chart js

در صورتی که طراح سایت باشید حتما تا به حال نیاز پیدا کرده اید که از نمودارهای گرافیکی زیبا بهره ببرید. برای این کار کتابخانه های جاوا اسکریپتی متنوعی وجود دارد اما ما در اینجا به آموزش Chart js که یکی از محبوب ترین و شناخته شده ترین فریم ورک های جاوا اسکریپتی در زمینه ترسیم نمودار است می پردازیم. پس در ادامه همراه ما باشید. این آموزش ها به دلیل گستردگی بحث در چند قسمت خدمت شما عزیزان ارائه خواهد شد.

 

برای شروع کار ابتدا می توانید سایت اصلی این فریم ورک Chart js مشاهده کنید و جدیدترین ورژن آن را هم از سایت خودشان دانلود بفرمایید، اما در صورتی که CDN استفاده می کنید لینک آن را در پایین قرار داده شده است:

وبسایت chartjs.org

شروع کار با Chart js

  • در گام نخست ابتدا فایل HTML خود را تنظیم می‌کنیم.
  • سورس یا CDN کتابخانه را در تگ head اضافه می‌کنیم.
  • برای آنکه نمودار ها را بتوانیم نمایش بدهیم نیاز داریم یک تگ Canvas تعریف کنیم.

 

برای آنکه این تگ در میانه صفحه به نمایش در بیاید کمی به آن استایل دادیم

نتیجه نهایی فایل HTML به شکل زیر است:

 

ترسیم نمودار با Chart js

حال برای اولین تجربه کار با Chart js یک نمودار میلی ای ترسیم میکنیم. کافی است قطعه کد زیر را قبل از بسته شدن تگ body قرار دهید. جزییات این کدها را البته مفصل تر در قسمت های بعدی شرح خواهیم داد.

 

 

 

برچسب‌ها:
طاها طبیب زادهطاها طبیب زاده

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
دیدگاه‌ها

*
*

*

code