Javascript

Welcome!

This community is for professionals and enthusiasts of our products and services.
Share and discuss the best content and new marketing ideas, build your professional profile and become a better marketer together.

7

چجوری تو جاوااسکریپت نمودار بکشیم؟

آواتار
ساناز میرباقری

سلام من میخوام با جاوااسکریپت یه نمودار میله ای بکشم . کتابخانه های زیادی وجود داره. به نظرتون کدام یکی اش بهتر و آسانتر هست. 

یه نمونه از کدش را هم بذارید لطفا

آواتار
رها کردن
2 پاسخ ها
5
آواتار
فردین مردانی
بهترین پاسخ

برای رسم نمودار در جاوااسکریپت، شما میتوانید از کتابخانه های مختلفی استفاده کنید که امکانات و قابلیتهای متنوعی را برای شما فراهم میکنند. برخی از کتابخانه های معروف و پرکاربرد برای رسم نمودار در جاوااسکریپت عبارتند از:


  • Chart.js:  یک کتابخانه متن باز و رایگان که از ۸ نوع نمودار پشتیبانی میکند. این کتابخانه از عنصر canvas در HTML5 استفاده میکند و نمودارهایی با انیمیشنهای زیبا و واکنشگرا ایجاد میکند. شما میتوانید با استفاده از CDN یا NPM این کتابخانه را به پروژههای خود اضافه کنید. در فایل جاوااسکریپت، باید یک شیء از کلاس Chart بسازید و به آن المان canvas و دادهها و تنظیمات نمودار میلهای خود را بدهید. برای مثال، اگر بخواهید یک نمودار میلهای ساده با دادههای زیر بسازید:

  • باید کد زیر را به فایل script.js خود اضافه کنید:


  • در نهایت، باید صفحه HTML خود را در مرورگر باز کنید و نمودار میلهای خود را مشاهده کنید.
  •  Chartist.js: یک کتابخانه ساده و سبک که از نمودارهای خطی و میلهای پشتیبانی میکند. این کتابخانه از عنصر SVG در HTML5 استفاده میکند و نمودارهایی با قابلیت شخصیسازی بالا ایجاد میکند. شما میتوانید با استفاده از CDN یا NPM این کتابخانه را به پروژههای خود اضافه کنید. 


  • D3.js: یک کتابخانه قدرتمند و پیشرفته که از انواع مختلف نمودارها پشتیبانی میکند. این کتابخانه از ترکیب عنصر SVG و HTML5 استفاده میکند و نمودارهایی با امکانات بینظیر ایجاد میکند. شما میتوانید با استفاده از CDN یا NPM این کتابخانه را به پروژههای خود اضافه کنید.


آواتار
رها کردن
5
آواتار
ساناز میرباقری
بهترین پاسخ

یکی از کتابخانه های جاوااسکریپت برای نمودار ChartJs است 

تو نمونه کد پایین یه نمودار میله ای کشیده شده


اینم نتیجه کد بالا


1 توضیح
آواتار
رها کردن
آواتار
مصطفی برمشوری
-

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