کتابخانه
chart.js یه کتابخانه جاوااسکریپت متن باز برای کشیدن نمودار توی صفحه های وبه. نمودار رو روی المان canvas رسم می کنه و از نمودار خطی و ستونی تا دایره ای و راداری رو پوشش می ده. اگه می خوای داده هات رو توی داشبورد یا گزارش سایتت ساده و تعاملی نشون بدی، گزینه ای سبک و راحته.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱٫۴ مگابایت· ۱۶ فایل· انتشار
SHA-256: 87364cc2b2a76a6684929e7d6b80b18a897794db38400caff1fcf1791c6925d2
اگه تا حالا خواسته باشی آمار فروش، بازدید روزانه یا مصرف منابع هاست رو توی یه صفحه نشون بدی، می دونی که جدول پر از عدد خسته کننده است و کسی دقیق نگاهش نمی کنه. chart.js برای همین کار ساخته شده: یه کتابخانه جاوااسکریپت با مجوز MIT که نمودار رو با المان canvas توی HTML5 می کشه. برای شروع لازم نیست از گرافیک چیزی بدونی. داده ها رو به شکل آرایه می دی، نوع نمودار رو انتخاب می کنی و بقیه رو خودش انجام می ده.
نوع های رایجش رو از اول داره: خطی، ستونی، دایره ای، دونات، راداری، قطبی، حبابی و پراکندگی. نمودار به صورت پیش فرض واکنش گرا است و با تغییر اندازه صفحه جمع و جور می شه. tooltip، راهنمای نمودار و انیمیشن ورود هم از همون اول همراهشه. می تونی چند نوع رو توی یه نمودار ترکیب کنی، مثلاً ستون برای فروش و خط برای میانگین. ظاهر و رفتار نمودار هم با options و افزونه های جانبی قابل تغییره.
جاهایی که خوب جواب می ده: داشبورد مدیریتی، صفحه گزارش، پنل کاربری و صفحه فرود که باید چند عدد مهم رو دیدنی نشون بده. جاهایی که شاید مناسب نباشه: نقشه جغرافیایی، نمودارهای خیلی تخصصی مثل نمودارهای مالی حرفه ای و داده های خیلی حجیم. اون وقت باید سراغ ابزار دیگه یا افزونه های جانبی بری. یه نکته هم یادت باشه: خروجی روی canvas کشیده می شه، پس موتور جستجو و صفحه خوان ها متن داخل نمودار رو نمی خونن. یه توضیح کوتاه یا جدول خلاصه کنارش بذار.
برای سایت های ایرانی چند نکته عملی هست. اول فونت: canvas از فونتی استفاده می کنه که توی تنظیمات نمودار یا CSS مشخص می کنی، پس مطمئن شو فونت فارسی قبل از رسم نمودار لود شده. دوم اعداد و تاریخ: تاریخ شمسی خودکار نمی آد و برچسب ها رو باید خودت آماده کنی. برای ارقام فارسی هم می تونی از گزینه locale یا فرمت کننده اعداد مرورگر توی callback ها استفاده کنی. سوم راست به چپ: برای راهنما و tooltip گزینه rtl هست، ولی خروجی رو حتماً تست کن و مستندات رسمی رو هم ببین. چهارم اتصال: وقتی اینترنت بین الملل مشکل داره، لود کردن از CDN خارجی ریسک داره و بهتره فایل رو خودت روی هاست بذاری. نسخه های رسمی و بدون تغییر chart.js توی مخزن داخلی ما هم در دسترسه.
استفاده از chart.js توی یه صفحه معمولی چند قدم بیشتر نداره. کد آماده پایین همین صفحه رو هم می تونی مبنا قرار بدی.
اگه با باندلر کار می کنی، ممکنه لازم باشه اجزای مورد نیاز رو خودت ثبت کنی. این بخش رو توی مستندات رسمی بخون.
یه کتابخانه جاوااسکریپت متن باز که با canvas توی HTML5 نمودار می کشه. برای نشون دادن داده ها توی داشبورد، گزارش و صفحه های آماری استفاده می شه و نمودارهای خطی، ستونی، دایره ای، راداری و چند نوع دیگه رو پشتیبانی می کنه. فلش یا افزونه مرورگر هم نمی خواد.
آره. کتابخانه به وردپرس وابسته نیست و با هر صفحه HTML کار می کنه. توی وردپرس بهتره فایل رو با wp_enqueue_script توی قالب یا افزونه خودت لود کنی و canvas رو توی محتوا یا قالب بذاری. افزونه های آماده هم هستن که ازش استفاده می کنن، ولی کیفیتشون فرق داره.
به صورت خودکار نه. تاریخ شمسی رو باید خودت به شکل برچسب متنی آماده کنی. برای ارقام فارسی، گزینه locale یا فرمت کننده اعداد مرورگر توی callback ها کمک می کنه. اگه محور زمانی واقعی با تقویم شمسی می خوای، باید راه حل جانبی پیدا کنی یا برچسب ها رو دستی بذاری.
آره، مجوز MIT داره. یعنی استفاده، تغییر و انتشارش توی پروژه شخصی و تجاری آزاده و لازم نیست برای هر سایت جداگانه هزینه ای بدی. فقط باید اعلان مجوز رو توی فایل ها نگه داری. اگه افزونه یا قالبی از chart.js استفاده کرده، مجوز خود اون بسته ممکنه فرق کنه. برای جزئیات دقیق، متن مجوزی که همراه بسته هست رو بخون.
بهترین راه اینه که فایل کتابخانه رو خودت روی هاست آپلود کنی و از همون جا لود کنی. اینطوری سایتت به سرور خارجی وابسته نیست. نسخه رسمی chart.js رو می تونی از همین مخزن بگیری و کنار فایل های دیگه سایتت بذاری.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.